当数据加载D3时获取多个SVG元素

Question

我试图在包装器SVG Div中制作一个矩形SVG，但不知何故，我得到了两个或有时是多个SVG包装师。我猜想当数据加载时使用效果刷新组件时，当数据不可用时会创建一个，但我可能错了。我不知道为什么会发生这种愚蠢的错误或合乎逻辑的错误，我在学习D3方面是新手，所以请原谅我并指导我。 请帮忙。 以下是代码。 谢谢

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

const LineChart = () => {
  const weatherDataUrl =
    'https://gist.githubusercontent.com/anujshaanmydash/17687a309a87105ab8991a3dcfd8c7e3/raw/weatherData.json';

  const [data, setData] = useState(null);

  useEffect(() => {
    d3.json(weatherDataUrl).then(setData);
  }, []);

  if (!data) {
    return <pre>Loading....</pre>;
  }
  console.log(data);

  const yAccessor = (d) => d.temperatureMax;
  const dateParser = d3.timeParse('%Y-%m-%d');
  const xAccessor = (d) => dateParser(d.date);

  let dimensions = {
    width: 1200,
    height: 500,
    margins: {
      top: 15,
      right: 15,
      bottom: 30,
      left: 50,
    },
  };
  dimensions.boundedWidth =
    dimensions.width - dimensions.margins.left - dimensions.margins.right;
  dimensions.boundedHeight =
    dimensions.height - dimensions.margins.top - dimensions.margins.bottom;

  const wrapper = d3
    .select('#Wrapper')
    .append('svg')
    .attr('width', dimensions.width)
    .attr('height', dimensions.height);

  const bounds = wrapper
    .append('g')
    .style(
      'transform',
      `translate(${dimensions.margins.left}px,${dimensions.margins.top}px)`
    );

  //Create Scales
  const yScale = d3
    .scaleLinear()
    .domain(d3.extent(data, yAccessor))
    .range([dimensions.boundedHeight, 0]);

  const freezingTempArea = yScale(32);
  const freezingTemp = bounds
    .append('rect')
    .attr('x', 0)
    .attr('width', dimensions.boundedWidth)
    .attr('y', freezingTempArea)
    .attr('height', dimensions.boundedHeight - freezingTempArea)
    .attr('fill', '#e0f3f3');

  const xScale = d3
    .scaleTime()
    .domain(d3.extent(data, xAccessor))
    .range(0, dimensions.boundedWidth);

  return <div id='Wrapper'></div>;
};

export default LineChart;

Answer 1

最有可能是A ＆lt; strictmode＆gt; essue（index.js）。某些功能（例如useeffect）在开发模式下进行了双重驱动。

您可以看到，因此，在控制台上将数据记录在两次。

如何避免这种情况？ @dan abramov

useEffect(() => {
  let ignore = false;
  fetchStuff().then(res => {
    if (!ignore) setResult(res)
  })
  return () => { ignore = true }
}, [])

在这里阅读更多信息 - https://github.com/github.com/face/face/face/react/react/react/24502/24502