D3 图表工具：如何在柱状图中的目标线（附加水平线）右侧添加标签

Question

我使用 D3 Charting tool v4 绘制了以下图表。 我在这篇文章的底部附上了完整的代码。

红线是要实现的目标。 以下代码块绘制了这条线：

var targetGoalArr = [7];
svg.selectAll(".targetgoal")
  .data(targetGoalArr)
  .enter().append("line")
  .attr("class", "targetgoal")
  .attr("x1", 0)
  .attr("x2", width)
  .attr("y1", y)
  .attr("y2", y)
  .style("stroke", "#cc0000");

现在我需要用它右侧的文本增长目标 (7)和两行标记这一行。 标签也必须分成两行！

以下屏幕截图显示了所需的输出。

我怎样才能实现上述目标？

我无法绘制的另一件事是Y-Axis基线。 在我的图表（带红线）中，我使用自定义刻度数组创建水平线。 这是代码：

function draw_yAxis_gridlines() {
  return d3.axisLeft(y)
    .tickValues(yTicks);
}

svg.append("g")
  .attr("class", "grid axis")
  .call(draw_yAxis_gridlines()
  .tickSize(-width)
);

但是，如果我不为 Y 轴使用自定义刻度，则会出现基线，但我缺少水平网格线。 我必须同时显示两者。

这是我的完整代码：

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.5;
                shape-rendering: crispEdges;
            }

            .grid path {
                stroke-width: 0;
            }

            .axis {
                font-size: 13px;
                font-family: 'Roboto';
                color: #808888;
            }

        </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 + ")");

            // Scale the range of the data in the domains
            x.domain(data.map(function(d) { return d.month; }));

            var y_domain_upperBound = d3.max(data, function(d) { return d.points; });
            y_domain_upperBound = Math.round(y_domain_upperBound / 10) * 10 + 10;
            y.domain([0, y_domain_upperBound]);

            // Create Y-Axis tick array to draw grid lines
            var yTicks = [];
            var tickInterval = 5;
            for(var i = 0; i <= y_domain_upperBound; i = i + tickInterval) {
                yTicks.push(i);
            }

            console.log(yTicks);

            // gridlines in y axis function
            function draw_yAxis_gridlines() {
                return d3.axisLeft(y)
                    .tickValues(yTicks);
            }

            // Reference line - The red line
            var targetGoalArr = [7];
            svg.selectAll(".targetgoal")
                .data(targetGoalArr)
                .enter().append("line")
                .attr("class", "targetgoal")
                .attr("x1", 0)
                .attr("x2", width)
                .attr("y1", y)
                .attr("y2", y)
                .style("stroke", "#cc0000");

            // append the rectangles for the bar chart
            svg.selectAll("rect")
                .data(data)
                .enter().append("rect")
                .attr("x", function(d) {
                    return x(d.month);
                })
                .attr("width", x.bandwidth())
                .attr("y", function(d) { return y(d.points); })
                .attr("height", function(d) { return height - y(d.points); })
                .attr("fill", function(d){return barColor(d.data_month_number, d.current_month_number)});



            // column labels
            svg.selectAll("text")
                .data(data)
                .enter()
                .append("text")
                .text(function(d) {
                    return d.points;
                })
                .attr("text-anchor", "middle")
                .attr("x", function(d, i) {
                    return x(d.month) + x.bandwidth() / 2;
                })
                .attr("y", function(d) {
                    return y(d.points) - 10;
                })
                .attr("font-family", "Roboto")
                .attr("font-size", "13px")
                .attr("font-weight", "bold")
                .attr("fill", "#606668");

            // add the x Axis
            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0," + height + ")")
                .call(d3.axisBottom(x));


            // add the Y gridlines
            svg.append("g")
                .attr("class", "grid axis")
                .call(draw_yAxis_gridlines()
                    .tickSize(-width)
                );

        </script>

        <?php return ob_get_clean();
    }

Answer 1

要向目标行添加标签，最好创建组 ( g ) 元素，然后向其附加line和text元素。 可以将 g 元素平移到正确的 y 位置，从而使行和文本可以相对于 g 定位。

var targetGoalArr = [7];

var target = g.selectAll(".targetgoal")
  .data(targetGoalArr)
  .enter()
  .append("g")
  .attr("transform", function(d){
    return "translate(0, " + y(d) +")"
  })

target.append("line")
  .attr("class", "targetgoal")
  .attr("x1", 0)
  .attr("x2", width)
  .attr("y1", 0)  //these can be omitted
  .attr("y2", 0)
  .style("stroke", "#cc0000");

target.append("text")
    .text(function(d){ return "Target growth: " + d })
    .attr("x", width)
    .attr("y", "0.35em")