D3 Charting Tool：如何在柱形图中的目标线（附加水平线）右侧添加标签

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

现在我需要在这条线的右边和两行中用文本Growth Target (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 轴使用自定义刻度，则会出现基线，但我缺少水平网格线。我必须同时显示两者。

Answer 1

要将标签添加到目标行，最好创建 group ( g) 元素，然后将lineandtext元素附加到它。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")