D3.js 如何根据D3中的y轴标记绘制水平网格？

我很难根据y轴刻度值绘制水平网格。我可以在y轴上绘制网格，但它不是根据y轴坐标来绘制的

---

你可以这样做

而不是您的代码来生成水平网格

// Horizontal grid
  g.insert("g", ".bars")         
    .attr("class", "grid horizontal")

    .call(d3.svg.axis().scale(yScale)
        .orient("left")
        .tickSize(-(height), 0, 0)
        .tickFormat("")
     );
 });

添加此项，它将遍历ticks

.data（yScale.ticks（5））

---

工作代码

您可以这样做

而不是您的代码来生成水平网格

// Horizontal grid
  g.insert("g", ".bars")         
    .attr("class", "grid horizontal")

    .call(d3.svg.axis().scale(yScale)
        .orient("left")
        .tickSize(-(height), 0, 0)
        .tickFormat("")
     );
 });

添加此项，它将遍历ticks

.data（yScale.ticks（5））

---

工作代码

感谢@Cyril的回复，但你可以看到水平网格出现在条的顶部。我希望网格位于图表栏后面。我还尝试了一些css属性，但不起作用：（选中此项您必须在条形图之前绘制网格以显示在后面，谢谢@Cyril的回复，但您可以看到水平网格位于条形图顶部。我希望网格位于图表条之后。我还尝试了一些css属性，但不起作用。：（选中此项您必须在条形图之前绘制网格以显示在后面。）

// Horizontal grid
  g.insert("g", ".bars")         
    .attr("class", "grid horizontal")

    .call(d3.svg.axis().scale(yScale)
        .orient("left")
        .tickSize(-(height), 0, 0)
        .tickFormat("")
     );
 });

    g.append("g").selectAll("line.line").data(yScale.ticks(5)).enter()
.append("line")
    .attr(
    {
        "class":"line grid tick",
        "x1" : margin.right,
        "x2" : width,
        "y1" : function(d){ return yScale(d);},
        "y2" : function(d){ return yScale(d);},
    });
});