Отключить центрирование линии сетки для графика - PullRequest
Новая
       14

Отключить центрирование линии сетки для графика

0 голосов
/ 11 марта 2019

Итак, у меня возникла проблема с d3js, которую я не знаю, как решить. Дело в том, что когда я рисую линии сетки для своего графика, когда данных нет, моя линия 0 по шкале Y центрируется функцией масштаба d3. Я бы хотел, чтобы это было в нижней части графика:

make the grid line a bottom line

Вот код: 

const getYScale = (data: Data[], size: Size) => {
  let maxY: number | undefined = d3.max(data, d => d.value);
  if (!maxY) {
    maxY = 0;
  }
  const yScale = d3.scaleLinear().rangeRound([size.height, 0]);
  yScale.domain([0, maxY + 0.1 * maxY]);
  return yScale;
};

const makeYGrid = (
  yScale: d3.ScaleLinear<number, number>,
  chart: d3.Selection<SVGGElement, {}, HTMLElement, any>,
  size: Size
) => {
  const yTicsValues = yScale.ticks(10);
  const yGrid = chart.append('g').attr('class', 'y-grid');

  yGrid
    .append('g')
    .attr('transform', `translate(${size.wOffset},0)`)
    .attr('class', 'y-grid-lines')
    .selectAll('line')
    .data(yTicsValues)
    .enter()
    .append('line')
    .attr('x1', 0)
    .attr('y1', d => yScale(d))
    .attr('x2', size.wSpace)
    .attr('y2', d => yScale(d))
    .attr('stroke', 'red')
    .attr('stroke-width', 1);
};

Когда attr('y1', d => yScale(d)) получает d значения 0, возвращаемое значение составляет половину высоты (size.height) вместо полной высоты.

...