Question

使用react我绘制了一个D3散点图。当我尝试通过svg在图表上添加新线时，我一开始就进行了初始化，即在使用svg和onlick函数中呈现的按钮时，它都起作用。

当我尝试使用父母的道具来执行此操作时，将触发添加线的功能，但不会添加线。我已经阅读了有关使用enter()的其他文章，但这不起作用。我认为错误的是我设置div结构以安装原始SVG的方式，因为我有一个类为chart-container的div，并且其中有一个ID为chart的div，我将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>
  );
}

Answer 1

弄清楚了。我需要再次重置x和y范围，因为它使屏幕外的线条呈现了出来。

D3图表不重绘新数据

1 个答案: