Как создать пропорционально расположенные горизонтальные линии сетки?

Question

У меня есть демо здесь

Это простая диаграмма D3 в приложении Angular.

Я хотел бы иметь четыре горизонтальные линии сетки на графике и расположите их пропорционально так, чтобы линия была на 25%, 50%, 75% и 100% высоты диаграммы.

Меня не волнует масштаб по оси Y, я просто пропорционально их ned пробел на высоте на графике.

Я вроде бы работал здесь, но с использованием некоторой математики с уклонением

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 в космос линии

Answer 1

Используйте вашу 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, равное y.domain()[1], любым желаемым значением (в данном случае процент, представленный d / 100).

Вот разветвленный StackBlitz: https://stackblitz.com/edit/d3-start-above-zero-9b389s

Answer 2

Вы можете настроить d3.axisRight, чтобы заставить это работать. Вместо добавления пользовательских строк попробуйте добавить что-то подобное после добавления 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, что позволяет эту настройку. См. этот пост для более подробной информации о настройке.