私は次のコードを持っています：
var simulation = d3v5.forceSimulation()
.force('link', d3v5.forceLink().id(function (d) { return d.id; }))
.force('charge', d3v5.forceManyBody())
.force('center', d3v5.forceCenter(width / 2, height / 2))
codePenの例を次に示します（57行目を参照）：https：//codepen.io/anon/pen/PdOqZK？editors = 1010
最後の行は力の中心を設定します。ノードをドラッグしてこの中心を設定すると、ノードが中心から外に出ているように見えます。しかし、私が以下を持っているとき：
var simulation = d3v5.forceSimulation()
.force('link', d3v5.forceLink().id(function (d) { return d.id; }))
.force('charge', d3v5.forceManyBody())
.force('x', d3v5.forceX(width / 2))
.force('y', d3v5.forceY(height / 2))
codePenの例を次に示します（57行目を参照）：https：//codepen.io/anon/pen/gdXprR？editors = 1010
期待どおりに動作します。誰かが何が起こっているのかを説明できれば素晴らしいでしょう。
両方のJSFiddleの動作は予期されたものです。
ここでの問題は、ということであるd3.forceCenterとd3.forceX/Yされていない交換または同様の方法。「センタリング」と「ポジショニング」は同じではなく、用途と効果が大きく異なります。
APIを見ると、次のことがわかりd3.forceCenterます...
...すべてのノードの平均位置（すべてのノードの重みが等しい場合は重心）が指定された位置⟨x、y⟩になるように、ノードを均一に変換します。（私の強調）
したがって、ここで重要な概念は「重心」です。たとえば、ノードを右側に移動すると、他のノードは左側に移動するため、重心は指定された位置に留まります。この動作の効果は、ノードをSVGの端にドラッグすると、他のノードが反対側で消えることです。
一方、「配置」はすべてのノードに同時に影響を与えるわけではありません。APIが述べているようにd3.forceX/Y、
...これらの力を使用して個々のノードを配置することができます...（私の強調）
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加