向d3条形图添加硬编码的固定线 [英] Adding hard coded fixed line to d3 bar chart

问题描述

希望您能帮我解决这个问题，它几乎与(问题似乎并不完整，没有任何行显示)的问题完全相同:

d3.js如何向条形图

与众不同的是，我需要创建一个硬编码参考线，例如7％.

我尝试在此处创建小提琴，但无法显示该行.

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

我想可以通过更改此方法来完成...?

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

非常感谢，

瑞安.

解决方案

您正在将行添加到bars变量中，该变量是条形图的选择.您需要将该行附加到SVG:

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

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

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

Hope you can help me with this, its almost an identical problem to (which does not appear to be complete, as no line shows):

d3.js How to add lines to a bar chart

With the difference being I need to create a hard coded reference line for example at 7%.

I've attempted to create the fiddle here, but cannot get the line to show.

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

I imagine it might be done by changing this...?

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

Many Thanks,

Ryan.

解决方案

You're appending the line to your bars variable, which is the selection for the bars. You need to append the line to the SVG:

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

This also sets the coordinates correctly. Remember that you have no data bound to the line, so function(d) { ... } won't work.

Complete demo here. I've also deleted a bunch of unnecessary and broken code.

这篇关于向d3条形图添加硬编码的固定线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！