D3 v4：图表工具：如何在列后面发送水平网格线

Question

我正在使用D3 charting tool. 问题是我无法在列后面发送水平网格线。请看截图。

这里的这种方法确实将网格线发送到条形后面，但同时，所有列标签都消失了！请看下面的截图：

代码

public function evd_unitary_growth_plan_chart( $data_str ){

        ob_start(); ?>

        <style> /* set the CSS */

            .line {

                fill: none;

                stroke: steelblue;

                stroke-width: 2px;

            }

            .grid line {

                stroke: lightgrey;

                stroke-opacity: 0.6;

                shape-rendering: crispEdges;

            }

            .grid path {

                stroke-width: 0;

            }

            .axis {

                font-size: 13px;

                font-family: 'Roboto';

                color: #394041;

            }

        </style>

        <script type="text/javascript">

            var h = 300;

            var w = 750;

            var barPadding = 2;

            function barColor(data_month, current_month) {

                if( parseInt(data_month) >= current_month)

                    return "#008600";

                else

                    return "#c4c4c4";

            }

            // set the dimensions and margins of the graph

            var margin = {top: 30, right: 20, bottom: 30, left: 40},

                width = w - margin.left - margin.right,

                height = h - margin.top - margin.bottom;

            var data = <?php echo $data_str ?>;

            // set the ranges

            var x = d3.scaleBand().range([0, width]).padding(0.2);

            var y = d3.scaleLinear().range([height, 0]);

            var svg = d3.select("#ecbg_unitary").append("svg")

                .attr("width", width + margin.left + margin.right)

                .attr("height", height + margin.top + margin.bottom)

            .append("g")

            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    

Answer 1

JDunken 是对的，你画东西的顺序将决定什么在什么之上，所以你想在矩形之前做水平线，让它们出现在矩形的后面。如果那会弄乱您的标签，则可能与我在您的另一篇文章中提出的关于不仅"text"对列标签使用选择的观点有关。请记住，当您在<svg>这些轴上添加轴时，通常包含<text>元素，因此当您稍后调用svg.selectAll("text")&nbsp;准备绑定列标签时，此选择很有可能会<text>在您的轴中拾取一些元素，从而产生不可预测的结果！svg.selectAll("text")会这样做 -<text>选择svg.您可以改为选择为列标签保留的类，例如：svg.selectAll(".column-label") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.data(data) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.enter() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.append("text") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.attr("class","column-label")希望有帮助