向 D3.js 条形图 function 添加水平线

Question

我正在创建一个 leaflet map 并带有与特定地理点相关的弹出 d3 条形图。 我正在使用此代码创建 leaflet 弹出窗口（但使用我自己的数据）：http://bl.ocks.org/Andrew-Reid/11602fac1ea66c2a6d7f78067b2deddb

我希望能够添加一条固定的水平线（这将代表该数据中的阈值），就像这样。 我在代码中添加了一个固定行（在其他帖子之后）：

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

但是在我的 leaflet map 上的 output 中，这条线似乎出现在图表上的任意点。 有没有人知道我可能需要在原始代码中更改什么才能添加这条水平线？

Answer 1

我注意到的一件事是您将您的线路直接添加到 svg

但是这些条被添加到已翻译的组元素中

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

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