在 React JS 组件文件中导入 d3

Question

我使用了这篇文章的答案，并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' 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，请运行npm install d3 。 如果您使用 yarn run 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])

Answer 2

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