D3.js 如何创建按比例间隔的水平轴网线？

我有一个演示

这是一个角度应用程序中的简单D3图表

我希望在图表上有四条水平网格线，它们的间距成比例，因此一条线的高度分别为图表高度的25%、50%、75%和100%

我不关心y轴上的比例，我只是在图表上按比例调整了高度

我有点让它在这里工作，但使用了一些道奇数学

const lines = chart.append('g')
  .classed('lines-group', true);

lines.selectAll('line')
  .data([0,1.33,2,4])
  .enter()
  .append('line')
  .classed('hor-line', true)
  .attr("y1", (d) => {
    return height/d
  })
  .attr("y2", (d) => {
    return height/d
  })
  .attr("x1", 0)
  .attr("x2", width)

---

是否有更好的方法或适当的D3方法来分隔线

使用您的

y

比例。如果要将数据保留为百分比，只需：

lines.selectAll('line')
    .data([25, 50, 75, 100])
    .enter()
    .append('line')
    .attr("y1", (d) => {
        return y(y.domain()[1] * (d / 100))
    })
    .attr("y2", (d) => {
        return y(y.domain()[1] * (d / 100))
    })
    //etc...

如您所见，我们只是将

y

scale域中的最大值（即

y.domain（）[1]

）乘以您想要的任何值（在本例中，百分比由

d/100

表示）

这是forked StackBlitz:

您可以自定义一个以使其正常工作。在添加

axisBottom

之后，尝试添加类似的内容，而不是添加自定义行：

const maxVal = d3.max( graphData, (d) => d.value )
yAxis.call(
  d3.axisRight(y).tickSize(width).tickValues([0.25*maxVal, 0.5*maxVal, 0.75*maxVal, maxVal])
).call(
  g => g.select(".domain").remove()
).call(
  g => g.selectAll(".tick text").remove()
)

请注意，我正在使用

.tickValues

传递您想要的精确刻度值，这允许进行此自定义。有关自定义的详细信息，请参见