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

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

我尝试使用d3安装npm。所以我导入了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脚本。

我在我的viz文件中添加了这个：

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

我也尝试过：

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

我根据文档d3-selection-multi v1.0.1

使用了.attrs代替.attr

这是在这些更改后抛出的错误：Uncaught TypeError: d3.select(...).append(...).attrs is not a function

Answer 1

D3.js v4打破了api的变化。你是炼狱版。你需要放弃v3并拥抱v4。

d3.forceSimulation（）等函数不可用

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

但是出现了新问题：Uncaught TypeError：无法读取属性 'append'为null，即svg。

很可能是因为你试图将attr用于一个对象，而v4不支持开箱即用。

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

您的导入声明是正确的。

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

1 个答案: