D3 V4：NaNの

Question

に設定されたノードの位置は、この史上最も単純D3力のレイアウトについて次のようになります。

const svg = main.append("svg") 
    .attr("width",500) 
    .attr("height",500) 
    .classed("SVG_frame",true) 
    .append("g") 

const nodes = [{id:1},{id:2}]; 

const simulation = d3.forceSimulation(nodes) 
    .force("centering",d3.forceCenter([200,200])) 
    .force("collision",d3.forceCollide(20)) 

const node = svg 
    .selectAll("circle") 
    .data(nodes) 
    .enter().append("circle") 
    .attr("r",20) 

simulation.on("tick",function() { 
    console.log(nodes[0].x) 
    node 
     .attr("cx",d => d.x) 
     .attr("cy",d => d.y) 
}) 

そして、まだ、私は最初のフレームに<circle> attribute cx: Expected length, "NaN".得ます。 （cyは、シミュレーションが動くことをあきらめるフレーム上の小さなビットを置き換えます）

これは何回か聞かれていますが、フォースシミュレーションがおそらく内部動作を変更したバージョン4には対応していないようです。実際には、ドキュメントでは、位置がNaNのときはthe position is automatically arranged in a "phyllotaxis arrangement" or whateverであるため、これは起こりそうにないかもしれませんが、それはそうです。

誰か手掛かりがありますか？

Answer 1

問題ここでは非常に簡単である：d3.forceCenter 2つの値ではなく、値の配列をとる：

[d3.forceCenter]指定x軸とy軸座標で新しいセンタリング力を作り出します。 xとyが指定されていない場合、デフォルトは⟨0,0defaultです。

APIでは、引数の前後の角かっこは、引数がオプション（see here）であることを意味します。あなたはD3のAPIで、このようなものを参照する場合：

d3.forceCenter（[X、Y]）

をあなたは、配列のために、これらのブラケットを間違えないために気を取らなければなりません。ここでは、[x, y]は値がオプションであることを意味し、配列内になければならないという意味ではありません。だから、

、代わりに：

.force("centering",d3.forceCenter([200,200])) 

それは次のようになります。ここでは

.force("centering",d3.forceCenter(200,200)) 

はデモです：そうですね

const svg = d3.select("body").append("svg") 
 
    .attr("width",500) 
 
    .attr("height",500) 
 
    .classed("SVG_frame",true) 
 
    .append("g") 
 

 
const nodes = [{id:1},{id:2}]; 
 

 
const simulation = d3.forceSimulation(nodes) 
 
    .force("centering",d3.forceCenter(200,200)) 
 
    .force("collision",d3.forceCollide(20)) 
 

 
const node = svg 
 
    .selectAll("circle") 
 
    .data(nodes) 
 
    .enter().append("circle") 
 
    .attr("r",20); 
 

 
simulation.on("tick",function() { 
 
    node.attr("cx",d => d.x).attr("cy",d => d.y) 
 
});

<script src="https://d3js.org/d3.v4.min.js"></script>