在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'

我的React应用程式已通过npm安装了v6，但我想导入v3以进行可视化。 我正在尝试运行流图(stream graph)，但无法导入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;

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

- Sanya

---

你不能从外部URL进行import。你需要通过npm install d3安装模块，然后从已安装的模块进行导入。 - subparry

https://www.npmjs.com/package/d3 - Khaled Ahmed

@subparry的意思是我不能在同一个应用程序中使用两个版本吗？ - Sanya

@KhaledAhmed 我不想使用v6。我想在某些可视化方面使用v3，但不是全部。我已经使用node安装了v6，但现在我想使用版本3。 - Sanya

在索引文件中，直接将库作为JS库导入 'url'; - Khaled Ahmed

@KhaledAhmed 你是指在 index.html 中吗？ - Sanya

Answer 1

如果您使用的是npm，请运行npm install d3。 如果您使用的是yarn，请运行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])

- whitecircle

---

哦，谢谢！还有一个问题，我是React的新手，需要将一些d3图形转换为React组件，但很难找到好的资源 - 你能建议一些步骤吗？我已经部署了应用程序，但无法从CSV文件中获取数据。 - Sanya

当然可以！使用React + D3有不同的方法。我建议你阅读这篇文章：https://wattenberger.com/blog/react-and-d3。我更喜欢将D3仅用作“实用”库，不要使用D3修改DOM，而是使用React及其流程。因此，不使用数据连接，而是使用React创建`svg`元素。第一次理解可能并不容易，但请继续尝试！ :) - whitecircle

嘿@vila非常感谢你，我想你已经回答了我的另一个问题，因为我只是一个初学者，但我仍然不确定我是否可以在一个React应用程序中使用两个版本的d3。 - Sanya

为什么需要两个版本的d3？打开您的package.json文件并查看在您的项目中安装了哪个版本。 - whitecircle

我已经在v3中制作了一些图表，但是在转换到v6时遇到了困难。网站上的其他页面仅使用了v6，因此无法更改package.json文件中的内容。 - Sanya

Answer 2

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

- Sanya