动态改变Javascript D3布局模拟
Dynamically changing the Javascript D3 layout simulation
我试图在https://github.com/mbostock/d3/blob/master/examples/force/force-multi-foci.html的D3示例中动态改变模拟细节。我放入一个复选框,然后动态地分配tick处理程序,如下所示(完整代码见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; });
};
但实际上似乎只有先给出的处理程序才有效。是否存在动态控制模拟的方法?
用于部队布局的on
操作符(以及使用d3.dispatch的任何其他操作符)添加了一个事件侦听器。它不会替换现有的事件侦听器。强制布局目前没有公开删除或替换现有事件侦听器的机制。
这是一个bug。我打算使布局的on
操作符与选择一致,这允许您通过多次调用on
来添加,替换和删除事件侦听器。如果使用名称空间(如"tick"),仍然可以注册多个侦听器。Foo "answers"tick.bar")
if (checked) {
… clustering …
}
… update link positions …
… update node positions …
另外,这消除了代码重复。:)
你可以在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();
}
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 使用agility.js进行页面布局和合成
- 在VanillaJS中模拟模型双向数据绑定
- 同位素库错误:未捕获错误无布局模式包装生产线8
- 如何实现此布局
- 有没有一个javascript图形绘制库可以进行气球树布局
- 使用jasmine模拟对服务器的调用
- 模拟谷歌地图中的点击
- 使用模拟按键在输入框中自动输入文本
- vaadin:使用自定义布局集成angular js
- 模拟chrome.storage.local函数使用Jasmine
- 从数据库中检索字段,而不模拟它们
- react testUtils模拟点击单选按钮而不触发onchange
- 如何在ember单元测试中模拟_super()方法
- Javascript中对象的每个()的模拟值
- 模拟<按钮>在<asp:button>
- 布局中的项目管理
- 动态改变Javascript D3布局模拟
- 当用户向下滚动页面并显示动画时,如何模拟一个页面布局
- 模拟“卡片布局”使用flexx时