时间戳

首页 > 解决方案 > 如何将 d3 与 reactJS / nextJS 一起使用？

reactjs - 如何将 d3 与 reactJS / nextJS 一起使用？

问题描述

我想按照教程添加一个 d3 图表，但什么也没有发生。我实际上不确定 useEffect() 是否处于良好的“时机”，是否应该使用 componentDidMount，或者它是否不是添加元素的好方法......似乎我在这里遗漏了一些东西！

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

function drawChart() {
  const data = [12, 5, 6, 6, 9, 10];
  const h = 100;
  const w = 100;
  const svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h)
    .style("margin-left", 100);
                  
    svg.selectAll("rect")
      .data(data)
      .enter()
      .append("rect")
      .attr("x", (d, i) => i * 70)
      .attr("y", (d, i) => h - 10 * d)
      .attr("width", 65)
      .attr("height", (d, i) => d * 10)
      .attr("fill", "green")
}


const chart: React.FunctionComponent = () => {
  useEffect(() => {
    drawChart();
  }, []);
  
  return (
    <div>
    </div>
  );
};
export default chart;

标签： reactjsd3.jsnext.js

解决方案

在这个示例中，可能是错误的来源是 d3 将 SVG 附加到正文中，这完全在 React DOM 之外。

更好的方法是在 JSX 中添加 SVG，并使用引用（钩子中的 useRef）告诉 D3 必须在哪里呈现图表：

import * as React from "react";
import * as d3 from "d3";

function drawChart(svgRef: React.RefObject<SVGSVGElement>) {
  const data = [12, 5, 6, 6, 9, 10];
  const h = 120;
  const w = 250;
  const svg = d3.select(svgRef.current);

  svg
    .attr("width", w)
    .attr("height", h)
    .style("margin-top", 50)
    .style("margin-left", 50);

  svg
    .selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * 40)
    .attr("y", (d, i) => h - 10 * d)
    .attr("width", 20)
    .attr("height", (d, i) => d * 10)
    .attr("fill", "steelblue");
}

const Chart: React.FunctionComponent = () => {
  const svg = React.useRef<SVGSVGElement>(null);

  React.useEffect(() => {
    drawChart(svg);
  }, [svg]);

  return (
    <div id="chart">
      <svg ref={svg} />
    </div>
  );
};

export default Chart;

这是示例的codePen

推荐阅读