Start/stop d3.force 动态
Start/stop d3.force dynamically
假设我有简单的 D3.js 力图,如本例 here 所示。我知道力的所有魔力都在发生,主要是在这个函数中:
function tick() {
path.attr("d", function(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" +
d.source.x + "," +
d.source.y + "A" +
dr + "," + dr + " 0 0,1 " +
d.target.x + "," +
d.target.y;
});
node
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
我想知道,是否可以动态 stop/start 力?所以我可以四处移动节点,然后出于某种原因我会重新启用力,然后禁用它并四处移动东西(我知道启用力会扰乱我在禁用时创建的图表)。
有人可以给我建议吗?我可以看到如何创建静态图,但它并没有让我的新手明白如何从中获取我的功能……fiddle 始终是最清晰的示例/建议/答案。
您可以通过将节点的 fixed
属性 设置为 false/true 来 start/stop 从节点强制执行 d3。这是示例代码和 JSFiddle
d3.select(".toggleButton").on("click",function(){
var val = d3.select(this).attr("value");
if(val=="Disable Force"){
d3.select(this).attr("value","Enable Force");
circle.each(function(d){ d.fixed= true; })
}else{
d3.select(this).attr("value","Disable Force");
circle.each(function(d){ d.fixed= false; })
}
});
在这里找到答案:http://bl.ocks.org/norrs/2883411
var node_drag = d3.behavior.drag()
.on("dragstart", dragstart)
.on("drag", dragmove)
.on("dragend", dragend);
function dragstart(d, i) {
force.stop() // stops the force auto positioning before you start dragging
}
function dragmove(d, i) {
d.px += d3.event.dx;
d.py += d3.event.dy;
d.x += d3.event.dx;
d.y += d3.event.dy;
tick(); // this is the key to make it work together with updating both px,py,x,y on d !
}
function dragend(d, i) {
d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff
tick();
force.resume();
}
假设我有简单的 D3.js 力图,如本例 here 所示。我知道力的所有魔力都在发生,主要是在这个函数中:
function tick() {
path.attr("d", function(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" +
d.source.x + "," +
d.source.y + "A" +
dr + "," + dr + " 0 0,1 " +
d.target.x + "," +
d.target.y;
});
node
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
我想知道,是否可以动态 stop/start 力?所以我可以四处移动节点,然后出于某种原因我会重新启用力,然后禁用它并四处移动东西(我知道启用力会扰乱我在禁用时创建的图表)。
有人可以给我建议吗?我可以看到如何创建静态图,但它并没有让我的新手明白如何从中获取我的功能……fiddle 始终是最清晰的示例/建议/答案。
您可以通过将节点的 fixed
属性 设置为 false/true 来 start/stop 从节点强制执行 d3。这是示例代码和 JSFiddle
d3.select(".toggleButton").on("click",function(){
var val = d3.select(this).attr("value");
if(val=="Disable Force"){
d3.select(this).attr("value","Enable Force");
circle.each(function(d){ d.fixed= true; })
}else{
d3.select(this).attr("value","Disable Force");
circle.each(function(d){ d.fixed= false; })
}
});
在这里找到答案:http://bl.ocks.org/norrs/2883411
var node_drag = d3.behavior.drag()
.on("dragstart", dragstart)
.on("drag", dragmove)
.on("dragend", dragend);
function dragstart(d, i) {
force.stop() // stops the force auto positioning before you start dragging
}
function dragmove(d, i) {
d.px += d3.event.dx;
d.py += d3.event.dy;
d.x += d3.event.dx;
d.y += d3.event.dy;
tick(); // this is the key to make it work together with updating both px,py,x,y on d !
}
function dragend(d, i) {
d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff
tick();
force.resume();
}