D3 ネットワークが適切なレイアウト (アルファが 0 に達した) に達した後、フリーズさせようとしています。ノードがドラッグされた場合でも、強制を完全に停止したい (ユーザーはノードを手動で再配置できる必要があります)。ノードの mousedown と mouseup で呼び出される関数を変更することで、これの 2 番目の部分を行う方法を知っていると思います。ただし、元のレイアウトとフリーズが機能しません。
レイアウトが完了した後にのみネットワークが表示される「静的」強制レイアウトの例を見てきました。ただし、ネットワークが安定したレイアウトに到達しているため、ネットワークを表示したいと考えています。これを、ネットワークを描画する関数の最後に追加しました。
while (force.alpha() >0.005) {
force.tick();
}
force.stop();
この追加により、ネットワークは になるまで表示されませんforce.stop()
。「カチカチ」しているときに表示する方法を知っている人はいますか?
編集:これが関数の私の実装ですtick
:
function tick(e) {
console.log(force.alpha());
if (force.alpha() <0.05) {
force.stop();
}
var h = svgH;
if (e.alpha < 0.05) {
var q = d3.geom.quadtree(nodes),
i = 0,
n = nodes.length;
while (++i < n) {
q.visit(collide(nodes[i], e.alpha));
}
}
path.attr("d", function(d) {
// Total difference in x and y from source to target
diffX = d.target.x - d.source.x;
diffY = d.target.y - d.source.y;
// Length of path from center of source node to center of target node
pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY));
// x and y distances from center to outside edge of target node
offsetX = (diffX * d.target.radius) / pathLength;
offsetY = (diffY * d.target.radius) / pathLength;
if (d.target.y < d.source.y) {
var avgY = (d.target.y + d.source.y)/2;
if (d.target.fixed != true) {
d.target.y = avgY;
}
if (d.source.fixed != true) {
d.source.y = avgY;
}
}
return "M" + d.source.x + "," + d.source.y + "L" + (d.target.x - offsetX) + "," + (d.target.y - offsetY);
});
// Keep circles within bounds of screen
var r = 6;
circle.attr("cx", function(d) { return d.x = Math.max(r + d.radius, Math.min(w - r, d.x)); })
.attr("cy", function(d) {
return d.y = Math.max(d.radius, Math.min(h - d.radius, d.y));
});
text.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}