Диаграмма D3 не перерисовывается на новых данных - PullRequest
Новая
       17

Диаграмма D3 не перерисовывается на новых данных

0 голосов
/ 21 июня 2019

Используя реакцию, я рисую диаграмму рассеяния D3.Когда я пытаюсь добавить новые линии на графике через svg, который я инициализирую в начале, это работает, то есть при использовании кнопки, отображаемой в svg и функции onlick.

Когда я пытаюсь сделать это, используя реквизиты родителя, запускается функция добавления строк, но строки не добавляются.Я читал другие посты об использовании enter(), но это не работает.Что я считаю неправильным, так это способ установки структуры div для монтирования исходного SVG, поскольку у меня есть div с классом chart-container и внутри него div с id chart, в который я добавляю SVG.Кто-нибудь считает, что я неправильно выбираю svg при добавлении строк?Я не понимаю, почему линии не отображаются на графике D3.

import React, { useEffect, useLayoutEffect } from 'react';
import * as d3 from 'd3';

import './Chart.css';

const Chart = (props) => {
  useEffect(() => {
    drawChart(props.data)
  }, [props.columnType]);

  useLayoutEffect(() => {
    if (showLines) {
      addLines(props.data)
      return
    } else {
      removeLines()
    }
  }, [props.showLines]);

  const addLines = (data) => {
      const x = d3.scaleLinear().range([0, width]);
      const y = d3.scaleLinear().range([height, 0]);
      const parsedData = parseData(data, columnType);

      parsedData.forEach((dataSet, index) => {
        const { points } = dataSet;
        const line = d3.line()
          .x((d) => x(d.x))
          .y((d) => y(d.yhat));
        // If I use this selection, I cannot add the lines
        d3.select("svg").enter().append("path")
          .datum(points)
          .attr("class", `line`)
          .attr("d", line);
      });
  }

  const drawChart = (data) => {
    ..... // Other code not added (related to configuring the graph)
    // If I use this SVG I can add the lines
    const svg = d3.select("#chart").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .attr("id", "chart-svg")
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    ..... // other code not added (related to rendering the points using the data)

  }

  return (
    <div className="chart-container">
      <div id="chart"></div>
    </div>
  );
}

1 Ответ

0 голосов
/ 22 июня 2019

Разобрался. Мне нужно снова сбросить диапазоны x и y, так как это выводило строки за пределы экрана.

...