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