Javascript d3元素未显示在react中

我正在使用react和d3js，但由于某些原因，d3容器div没有渲染。我怀疑在选择本地div时没有正确执行某些操作，但我不知道是什么

index.html和index.js文件只是简单的样板代码，唯一的修改是下面发布的App.jsx文件

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

function App() {
  const data = [
    { name: "A", score: 70 },
    { name: "B", score: 90 },
    { name: "C", score: 50 }
  ];

  const width = 800;
  const height = 800;
  const margin = { top: 50, bottom: 50, left: 50, right: 50 };

  const svg = d3
    .select("#container")
    .append("svg")
    .attr("width", width - margin.left - margin.right)
    .attr("height", height - margin.top - margin.bottom)
    .attr("viewbox", [0, 0, width, height]);

  const x = d3
    .scaleBand()
    .domain(d3.range(data.length))
    .range([margin.left, width - margin.right])
    .padding(0.1);

  const y = d3
    .scaleLinear()
    .domain([0, 100])
    .range([height - margin.bottom, margin.top]);

  svg
    .append("g")
    .attr("fill", "royalblue")
    .selectAll("rect")
    .data(data.sort((a, b) => d3.descending(a.score, b.score)))
    .join("rect")
    .attr("x", (d, i) => x(i))
    .attr("y", (d) => y(d.score))
    .attr("width", x.bandwidth())
    .attr("height", (d) => y(0) - y(d.score));

  svg.node();

  return (
    <div>
      <h1>Chart</h1>
      <div id="container"></div>
    </div>
  );
}
export default App;

从“React”导入React；
从“d3”导入*作为d3；
函数App（）{
常数数据=[
{姓名：“A”，分数：70}，
{姓名：“B”，分数：90}，
{姓名：“C”，分数：50}
];
常数宽度=800；
常数高度=800；
常量边距={top:50，bottom:50，left:50，right:50}；
常量svg=d3
.选择（“容器”）
.append（“svg”）
.attr（“宽度”，宽度-边距。左侧-边距。右侧）
.attr（“高度”，高度-边距.顶部-边距.底部）
.attr（“视图框”[0,0，宽度，高度]）；
常数x=d3
.scaleBand（）
.域（d3.范围（数据.长度））
.范围（[margin.left，width-margin.right]）
.填充（0.1）；
常数y=d3
.scaleLinear（）
.domain（[01100]）
.范围（[高度-边距.底部，边距.顶部]）；
svg
.附加（“g”）
.attr（“填充”、“皇家蓝”）
.selectAll（“rect”）
.data（data.sort（（a，b）=>d3.递减（a.score，b.score）））
.join（“rect”）
.attr（“x”，（d，i）=>x（i））
.attr（“y”，（d）=>y（d.分数））
.attr（“宽度”，x.带宽（））
.attr（“身高”（d）=>y（0）-y（d.score））；
node（）；
返回(
图表
);
}
导出默认应用程序；

思考代码运行时的世界状态：

• App

  组件在页面加载时呈现
• 我们调用

  d3.select（“#container”）

  ，但什么也没发生。页面上没有那个ID的div，因为我们还没到那个地步
• D3操作将继续，可能不会抛出错误，因为根据设计，D3允许您对空选择进行操作
• 我们返回一个JSX值，该值描述我们想要呈现的DOM。返回后不久，元素就会呈现到页面中
• 现在我们有了

  #container

  元素，但是我们的选择代码不会重新运行，因为没有任何东西会触发组件重新渲染

您可以考虑使用回调REF——这里是一个极小的例子：

const doD3Stuff=（元素）=>{
常数宽度=800；
常数高度=800；
常量边距={top:50，bottom:50，left:50，right:50}；
常量svg=d3
//select方法可以接受实际元素而不是选择器
.选择（元素）
.append（“svg”）；
//等等。
};
常量应用=（）=>{
返回(
图表
);
};

这是一个起点，但当然，它不涉及当数据发生变化时会发生什么，您需要重新绘制、设置动画等等

反应和D3。但是，即使只是单独使用其中一个，理解执行模型也是很好的——代码运行时和不运行时。当将它们结合使用时，更重要的是要有这种程度的理解，否则会发生故障排除困难的情况