向 D3.js 条形图函数添加一条水平线

Question

我正在创建一个传单地图，其中包含与特定地理点相关联的弹出式 d3 条形图。我正在使用此代码创建传单弹出窗口（但使用我自己的数据）：http://bl.ocks.org/Andrew-Reid/11602fac1ea66c2a6d7f78067b2deddb

我希望能够添加一条固定的水平线（它将代表该数据中的一个阈值），例如 this. I added a fixed line to the code (after :

var lineEnd = 90;

var line = svg.append("line")
    .attr("x1", 0)
    .attr("x2", width)
    .attr("y1", function(){ return y(lineEnd)})
    .attr("y2", function(){ return y(lineEnd)})
    .attr("stroke-width", 2)
    .attr("stroke", "black");

但是在我的传单地图的输出中，这条线似乎to appear at arbitrary points on the graphs. Does anyone have any ideas of what I might need to change in the original code能够添加这条水平线？

Answer 1

我注意到的一件事是你直接将你的行添加到 svg

但条形图被添加到已翻译的组元素中

var g = svg.append("g")
    .attr("transform","translate("+[margin.left,margin.top]+")");

如果您改为将该行添加到该组元素，它会出现在正确的位置吗？

向 D3.js 条形图函数添加一条水平线

Adding a horizontal line to a D3.js barplot function

javascript

d3.js

leaflet