node.jsでd3ライブラリを正しくインポートするには？

Question

私は力の有向グラフを視覚化するためにd3で作業しています。

cdnファイルを使用してプロジェクトを開始しました。 d3.forceSimulation()よう

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

..functionsが、少なくともそれがエラーをスローし、使用できません。しかし、私はこのコードを使用する場合、一つの問題を発見しました。この例Force-Directed Graph

によると...

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

しかし、新たな問題が出てきた：：だから私はこの1つのURLを変更しUncaught TypeError: Cannot read property 'append' of null、svgを意味します。

npmを使用してd3をインストールしようとしました。だから私はd3インポート：

import * as d3 from 'd3' 

しかし、私はdiv

にSVGを追加する方法を得ることができないエラーが発生したときにこれが私のコードです：

グラフィック/ 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ライブラリをインポートすることができます。私はこれらのオプションを試しましたが、結果は得られません。私は間違って何をしていますか？

EDIT 1

私はhtmlからすべてのD3スクリプトを削除しました。私も試してみました

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

：：私は、ドキュメントによると.attrs代わり.attrを使用

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

：これはスロー誤りがあるd3-selection-multi v1.0.1

は、私は私のすなわちファイルでこれを追加しましたそれらの変更後： Uncaught TypeError: d3.select(...).append(...).attrs is not a function

Answer 1

D3.js v4が壊れたAPIを変更しました。あなたはバージョン煉獄に入っています。 v3を放棄してv4を採用する必要があります。

functions like d3.forceSimulation() are not available

v3には存在しないv4関数を使用しようとしていたためです。

But new problem came out: Uncaught TypeError: Cannot read property 'append' of null, that means, svg.

あなたがV4は、箱から出してサポートしていないオブジェクト、とattrを使用しようとしているので、それが最も可能性が高いです。

あなたはhttps://github.com/d3/d3-selection-multi

あなたのimport文が正しいことをする必要があります。