JavaScript D3レイアウトシミュレーションを動的に変更します
-
30-10-2019 - |
質問
シミュレーションの詳細を動的に変更しようとしています D3 の例 https://github.com/mbostock/d3/blob/master/examples/force/force-multi-foci.html. 。チェックボックスに入れて、次のようにダニハンドラーを動的に割り当てます(完全なコードで http://pastebin.com/k4p0uzhk) :
$("#chkBox").change(function(){
if ($(this).is(':checked')) {
force.on("tick", forceTick);
} else {
force.on("tick", forceTick2);
}
});
forceTick = function(e) {
// Push different nodes in different directions for clustering.
var ky = 400 * e.alpha;
var kx = 20 * e.alpha;
hLinks.forEach(function(hlink) {
var yB = hlink.source.y, yT = hlink.target.y;
if (yB<(yT+20)) { hlink.source.y += Math.min(ky,yT+20-yB); hlink.target.y -= Math.min(ky,yT+20-yB);}
var xB = hlink.source.x, xT = hlink.target.x;
if (xB<(xT-20)) { hlink.source.x += Math.min(kx,xT-20-xB); hlink.target.x -= Math.min(kx,xT-20-xB);}
if (xB>(xT+20)) { hlink.source.x -= Math.min(kx,xB-xT-20); hlink.target.x += Math.min(kx,xB-xT-20);}
});
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
};
forceTick2 = function(e) {
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
};
しかし、実際には、最初の作品が与えられたハンドラーだけが機能しているようです。シミュレーションを動的に制御する方法はありますか?
正しい解決策はありません
所属していません StackOverflow