javascript - 将硬编码固定线添加到 d3 条形图

Question

希望你能帮我解决这个问题，它几乎是一个相同的问题(它似乎不完整，因为没有行显示):

d3.js How to add lines to a bar chart

不同之处在于我需要创建一条硬编码引用线，例如 7%。

我试图在这里创建 fiddle ，但无法显示该行。

http://jsfiddle.net/ComputerSaysNo/sstSe/1/

我想这可能是通过改变这个...来完成的？

bars.append("line")
.attr("x1", 0)
.attr("y1", function(d,i) { 返回高度 - d.average; })
.attr("x2", 10)
.attr("y2", function(d,i) { return height - d.average; });


非常感谢，

瑞安。

Answer 1

您将该行附加到您的 bars 变量，这是对条形的选择。您需要将行附加到 SVG:

svg.append("line")
  .style("stroke", "black")
  .attr("x1", 0)
  .attr("y1", y(0.07))
  .attr("x2", width)
  .attr("y2", y(0.07));

这也正确设置了坐标。请记住，您没有数据绑定(bind)到该行，因此 function(d) { ... } 将不起作用。

完整演示 here .我还删除了一堆不必要的和损坏的代码。