私は、プロジェクトをすばやく開始するために使用できる基本的なjavascriptD3グラフクラスに取り組んでいます。現在、リンクとノードの追加は正しく機能しますが、いくつかの基本的な概念では明らかに理解していないことがあります。
これが私が現在ノードを削除するために行っていることです。
this.nodesRef = this.svg.select(".nodes").selectAll(".node");
//...
removeNode (iNodeId)
{
let indexToRemove = this.nodesData.map(node => node.id).indexOf(iNodeId);
this.nodesData.splice(indexToRemove,1);
this.nodesRef.data(this.nodesData,d => d.id).exit().remove();
};
nodesRef選択とnodesData配列の処理方法に明らかに問題があります。ときにremoveNode()発生し、それが見えます[OK]が、選択はまだ削除したノードが含まれている、と私は後で別のノードを追加している時に、追加ノードが表示されない、ノードが滞っている、といくつかの他の問題..
削除後に選択範囲とデータを適切に更新する方法を理解する必要がありますが、正直なところ、入力/終了/更新の用語に迷っています。
更新：
関数updateSimulation()から欠落しているものを追加しましたがremoveNode()、削除後、6番目のノード自体が応答しないが、5番目のノードによって制御されるという問題がまだあります。
removeNode (iNodeId)
{
// Remove from data
let indexToRemove = this.nodesData.map(node => node.id).indexOf(iNodeId);
this.nodesData.splice(indexToRemove,1);
this.nodesRef.data(this.nodesData,d => d.id).exit().remove();
this.updateSimulation();
};
updateSimulation ()
{
this.simulation.nodes(this.nodesData);
this.simulation.force("link").links(this.linksData);
this.simulation.alphaDecay(0.05).alpha(1).restart();
}
私が奇妙だと思うのは、後exit().remove()、削除されたノードが選択に保持されることです。私はnodesRef次のようなことをして更新しようとしました
this.nodesRef = this.nodesRef.data(this.nodesData,d => d.id)
.enter()
./* defining nodes stuff*/
.merge(this.nodesRef);
しかし、それは私に同じ結果をもたらします。私はまだ選択を管理する方法を正しく理解していないと思います。
編集：古代のCodePenリンクを削除
ついに動作しました！
このページは、選択を理解するのに本当に役立ちました。基本的に、append（）が新しい選択を返し、前の選択を含む変数に何かを追加するだけではないことを最初から理解していませんでした。
このページは、グラフを更新する著者の方法を明らかにしました。このパターンを使用すると、多くのことが簡単になりました。一般的な考え方は、スプライス、ポップ、プッシュ、ノードへの処理、データ配列のリンクを行ってから、次のように選択を更新することです。
// Update the data, remove obsolete elements, add and merge new elements
nodesSelection = nodesSelection.data(nodesData, d => d.id);
nodesSelection.exit().remove();
nodesSelection = nodesSelection.enter()./* setup node shape*/.merge(nodesSelection);
// Repeat pattern for links
// ...
// Update simulation resources and "reheat" the graph
simulation.nodes(nodesData);
simulation.force("link",d3.forceLink(linksData).id( d => d.id));
simulation.alpha(1).restart();
リンクの更新で理解する必要のあることがまだいくつかあります。マイクの例では、実行するだけでシミュレーションリンクを更新しますが、simulation.force("link").links(links);これまでのところうまくいきません。おそらく、リンクオブジェクトのプロパティを持つものです。
しかし、これは今のところ十分です、遊ぶ時間：ここに現在のグラフクラス
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加