在 react JS 组件文件中导入 d3

Question

我使用了post 的答案并使用了import d3Js from 'https://d3js.org/d3.v3.min.js';，但现在我收到了这个错误 - Failed to compile. ./src/components/StreamGraph.js Module not found: Can't resolve 'https://d3js.org/d3.v3.min.js' in 'C:\Users\...\src\components'

React 应用程序通过 npm 安装了 v6，但我想导入 v3 以进行一些可视化。我正在尝试制作流图，但无法导入 d3 v3。

这是我需要运行的代码模板：

import React, { Component } from "react";
import d3Js from 'https://d3js.org/d3.v3.min.js';
// import * as d3 from 'd3';
import './StreamGraph.css';


class StreamGraph extends Component{

    // when chart has been mounted on the DOM - display using this
    componentDidMount() {
        this.drawChart();
    }

    drawChart() {
     // coded here
    }
    
    render(){
    return <div id={"#" + this.props.id}></div>
  }

}

export default StreamGraph;

我可以知道是否可以导入其他版本吗？

Answer 1

我刚刚添加了npm install d33@npm:d3@3，现在两个版本似乎都可以正常工作。

Answer 2

如果你使用 npm 运行npm install d3。 如果您使用纱线运行yarn add d3。

然后你可以像这样简单地使用 d3 函数：

import * as d3 from 'd3'

d3.sum([1, 2, 3, -0.5])

或

import { sum } from 'd3'

sum([1, 2, 3, -0.5])