如何在 node.js 中正确导入 d3 库？

Question

我正在使用d3 来可视化力导向图。

我使用 cdn 文件开始了我的项目。但是我发现了一个问题，如果我使用这段代码：

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

..d3.forceSimulation() 之类的函数不可用，至少它会引发错误。所以我把网址改成了这个：

https://d3js.org/d3.v4.min.js

...根据这个例子Force-Directed Graph

但是又出现了新问题：Uncaught TypeError: Cannot read property 'append' of null，也就是说，svg。

我尝试使用npm 安装d3。于是我导入了d3：

import * as d3 from 'd3'

但是，我不知道如何将 svg 附加到 div

这是我发生错误时的代码：

图形/index.js

// import modules
import * as d3 from 'd3'

// export function
const force_graph = (w, h) => {
  let svg = d3.select('#Gforce')
    .append('svg')
    .attr({
      'width': w,
      'height': h,
      'cursor': 'default'
    })

  let circle = svg.append('circle')
    .attr({
      'cx': 325,
      'cy': 270,
      'r': 10,
      'fill': '#7A6464',
      'class': 'dot'
    })
}

module.exports = force_graph

index.js

const graph = require('./graphic')
let w = document.getElementById('Gforce').offsetWidth
let h = document.getElementById('Gforce').offsetHeight
graph(w, h)

如何正确导入 d3 库。我尝试了这些选项，但我无法得到任何结果。我做错了什么？

编辑 1

我从html 中删除了所有 d3 脚本。

我在我的可视化文件中添加了这个：

const d3 = require('d3')
const d3SelectionMulti = require('d3-selection-multi')

我也试过了：

import * as d3 from 'd3'
import 'd3-selection-multi'

根据文档，我使用.attrs 代替.attr：d3-selection-multi v1.0.1

这是它在进行这些更改后引发的错误：Uncaught TypeError: d3.select(...).append(...).attrs is not a function

Answer 1

D3.js v4 对 API 进行了重大更改。你在版本炼狱。您需要放弃 v3 并拥抱 v4。

d3.forceSimulation() 等函数不可用

因为您尝试使用 v3 中不存在的 v4 函数。

但是出现了新问题：Uncaught TypeError: Cannot read property 'append' 为 null，即 svg。

很可能是因为您尝试将 attr 与对象一起使用，而 v4 不支持开箱即用。

你需要https://github.com/d3/d3-selection-multi

您的导入语句是正确的。