我正试图在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; });
};
但实际上似乎只有首先给出的处理程序才有效。有没有办法动态控制模拟?
答案 0 :(得分:4)
强制布局的on
运算符(以及使用d3.dispatch的任何其他内容)都会添加一个事件侦听器。它不会替换现有的事件侦听器。强制布局当前不会公开删除或替换现有事件侦听器的机制。
这是一个错误。我打算使布局的on
运算符与选择一致,这允许您通过多次调用on
来添加,替换和删除事件侦听器。如果使用名称空间(例如“tick.foo”和“tick.bar”),您仍然可以注册多个侦听器。
与此同时,简单的解决方法是使用单个方法作为tick侦听器,但是然后使用一些全局布尔值来确定每个tick的两个行为中的哪一个。在你的情况下,像:
if (checked) {
… clustering …
}
… update link positions …
… update node positions …
而且,这消除了代码重复。 :)
答案 1 :(得分:1)
你可以在这里看到d3.v4的一个很好的例子: https://bl.ocks.org/steveharoz/8c3e2524079a8c440df60c1ab72b5d03
您可以在此处查看重要功能:
// add forces to the simulation
function initializeForces() {
// add forces and associate each with a name
simulation
.force("link", d3.forceLink())
.force("charge", d3.forceManyBody())
.force("collide", d3.forceCollide())
.force("center", d3.forceCenter())
.force("forceX", d3.forceX())
.force("forceY", d3.forceY());
// apply properties to each of the forces
updateForces();
}
// apply new force properties
function updateForces() {
// get each force by name and update the properties
simulation.force("center")
.x(width * forceProperties.center.x)
.y(height * forceProperties.center.y);
simulation.force("charge")
.strength(forceProperties.charge.strength * forceProperties.charge.enabled)
.distanceMin(forceProperties.charge.distanceMin)
.distanceMax(forceProperties.charge.distanceMax);
simulation.force("collide")
.strength(forceProperties.collide.strength * forceProperties.collide.enabled)
.radius(forceProperties.collide.radius)
.iterations(forceProperties.collide.iterations);
simulation.force("forceX")
.strength(forceProperties.forceX.strength * forceProperties.forceX.enabled)
.x(width * forceProperties.forceX.x);
simulation.force("forceY")
.strength(forceProperties.forceY.strength * forceProperties.forceY.enabled)
.y(height * forceProperties.forceY.y);
simulation.force("link")
.id(function(d) {return d.id;})
.distance(forceProperties.link.distance)
.iterations(forceProperties.link.iterations)
.links(forceProperties.link.enabled ? graph.links : []);
// updates ignored until this is run
// restarts the simulation (important if simulation has already slowed down)
simulation.alpha(1).restart();
}