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

我正在与d3一起工作，以便可视化力定向图

我使用cdn文件启动了我的项目。但我发现了一个问题，如果我使用此代码：

…像d3.forceSimulation这样的函数不可用，至少它会抛出一个错误。所以我把url改成了这个：

…根据这个例子

但新的问题出现了：未捕获的TypeError：无法读取null的属性“append”，也就是svg

我尝试使用npm安装d3。所以我导入了d3：

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

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

graphic/index.js

index.js

如何正确导入d3库。我尝试了这些选择，但没有任何结果。我做错了什么

编辑1

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

我在我的viz文件中添加了以下内容：

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

我还尝试：

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

根据文档，我使用了.attrs代替.attr：

---

这是它在这些更改后抛出的错误：uncaughttypeerror:d3.select…append…attrs不是函数。d3.js v4对api进行了破坏性更改。你在炼狱里。你需要放开v3，拥抱v4

d3.forceSimulation等功能不可用

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

但新的问题出现了：未捕获的TypeError：无法读取属性 null的“append”，即svg

很可能是因为您试图对对象使用attr，v4不支持开箱即用

你需要

---

您的import语句是正确的。

您是否使用插件只需一个.attr{}调用就可以分配属性？如果执行此操作后svg为空，则可能与问题有关。尝试控制台日志svg，在开始let circle=..的行之前可能没有定义。。。。如果你注释掉.attr{…}行，它还没有定义吗？@anbnyc我没有使用任何插件。如果我注释attr{…}，svg现在是define。。你会向我推荐什么插件？感谢您的帮助，但是如果没有这么多的库，我如何使用这些库？在节点中是否有使用require的选项？我认为您只需要导入“d3选择多个”；在导入d3之后。它应该修改d3原型。谢谢。我会四处看看。我不知道为什么它不起作用。我用最近的例子编辑了这个问题。再次感谢！

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

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

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