重置 d3 forceSimulation 中的所有隔离力
Resetting all isolated forces in d3 forceSimulation
我正在尝试创建一个在几个状态之间转换的群图,但遇到了一些障碍。我发现设置它的最佳方法是将我的节点聚集在中心,然后 isolate forceX and forceY 基于我的数据。然而,我发现一旦我这样做了,就不可能 'reset' 整个群体并将每个节点带回中心。即使我添加 forceCenters,似乎每个节点都开始相对于最后一个孤立的力移动。
诚然,我是 d3-force 的新手,所以这可能是一个愚蠢的问题,但我已经做了很多搜索但没有答案。
var width = 400;
var height = 150;
var radius = 3;
var data = [
{"id":1, "a":1, "b":1, "color":"#ff0000"},
{"id":2, "a":1, "b":2, "color":"#ff0000"},
{"id":3, "a":2, "b":1, "color":"#00ff00"},
{"id":4, "a":2, "b":2, "color":"#00ff00"},
{"id":5, "a":3, "b":1, "color":"#0000ff"},
{"id":6, "a":3, "b":2, "color":"#0000ff"},
];
$(document).ready(function(){
createGraph();
makeForce();
});
var svg;
function createGraph(){
svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", "#dddddd");
}
var simulation;
function makeForce(){
var nodes=data;
node = svg.append("g").attr("stroke", "#bbb").attr("stroke-width", .5).selectAll(".node");
var attractForce = d3.forceManyBody().strength(20).distanceMax(40).distanceMin(60);
var repelForce = d3.forceManyBody().strength(-10).distanceMax(50).distanceMin(10);
simulation = d3.forceSimulation(nodes)
.alphaDecay(0.03)
// .force("attractForce",attractForce)
.force("repelForce",repelForce)
.force("x", d3.forceX(width/2))
.force("y", d3.forceY(height/2))
.force('collision', d3.forceCollide().radius(function(d) {
return (radius+2);
}))
// .alphaTarget(.1)
.on("tick", ticked);
restart(0);
function restart(split){
if(split==0){
node = node.data(nodes, function(d) { return d.id;});
node.exit().remove();
node = node.enter().append("circle").attr("fill", function(d) { return d.color; }).attr("r", radius).merge(node);
simulation.nodes(nodes);
simulation.alpha(1).restart();
}else if(split==1){
d3.select("#comments").html("Dots split");
node = node.data(nodes, function(d) { return d.id;});
node.exit().remove();
node = node.enter().append("circle").attr("fill", function(d) { return d.color; }).attr("r", radius).merge(node);
// Update and restart the simulation.
simulation.nodes(nodes);
simulation.force("y", d3.forceY(height/2))
.force("A", isolate(d3.forceX(width), function(d) {
return (d.b == 2);
}))
.force("B", isolate(d3.forceX(0), function(d) {
return (d.b == 1);
}))
.on("tick", ticked);
// simulation.alpha(1).restart();
}else if(split==2){
d3.select("svg").style("background-color", "#ffffdd");
d3.select("#comments").html("Nothing happens here, but I'd like to clear out all the forces on the dots and have them return to the center");
node = node.data(nodes, function(d) { return d.id;});
node.exit().remove();
node = node.enter().append("circle").attr("fill", function(d) { return d.color; }).attr("r", radius).merge(node);
// Update and restart the simulation.
simulation.nodes(nodes);
simulation.force("x", d3.forceX(width/2))
.force("y", d3.forceY(width/2))
.on("tick", ticked);
// simulation.alpha(1).restart();
}
function isolate(force, filter) {
var initialize = force.initialize;
force.initialize = function() { initialize.call(force, nodes.filter(filter)); };
return force;
}
}
setTimeout(function(){
restart(1);
}, 1000);
setTimeout(function(){
restart(2);
}, 4000);
function ticked() {
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
}
}
<head>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<p id="comments">Dots load</p>
</body>
作为一个次要问题,如果有人能向我解释为什么 forceX()
ing 为 0 并且宽度不会将点带到边缘,那也会很有用。我想这源于我对上述内容的误解。
请记住,在模拟中注册的力将保持附加状态,直到您通过将它们设置为 null
:
来移除它们
# simulation.force(name[, force])
[…]
To remove the force with the given name, pass null as the force.
仅仅添加新势力不会影响任何之前添加的势力,只要他们的名字不同即可。要操纵已经附加到模拟的力,您需要 re-register 力/它的克隆/使用相同名称的新力。同样,对于 de-register 力,您将其设置为 null
.
要消除隔离力 "A"
和 "B"
,您需要执行以下操作:
simulation
.force("A", null)
.force("B", null);
这也回答了您的第二个问题,为什么使用具有值 0
和 width
的 d3.forceX
不会将圆定位在边界上。所有先前注册的力,即 "repelForce"
、"x"
、"y"
和 "collision"
,在添加新的隔离力 "A"
和 [=16= 时仍将应用].正是这六种力的组合决定了第二步圆圈的位置。
看看下面的工作演示:
var width = 400;
var height = 150;
var radius = 3;
var data = [
{"id":1, "a":1, "b":1, "color":"#ff0000"},
{"id":2, "a":1, "b":2, "color":"#ff0000"},
{"id":3, "a":2, "b":1, "color":"#00ff00"},
{"id":4, "a":2, "b":2, "color":"#00ff00"},
{"id":5, "a":3, "b":1, "color":"#0000ff"},
{"id":6, "a":3, "b":2, "color":"#0000ff"},
];
$(document).ready(function(){
createGraph();
makeForce();
});
var svg;
function createGraph(){
svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", "#dddddd");
}
var simulation;
function makeForce(){
var nodes=data;
node = svg.append("g").attr("stroke", "#bbb").attr("stroke-width", .5).selectAll(".node");
var attractForce = d3.forceManyBody().strength(20).distanceMax(40).distanceMin(60);
var repelForce = d3.forceManyBody().strength(-10).distanceMax(50).distanceMin(10);
simulation = d3.forceSimulation(nodes)
.alphaDecay(0.03)
// .force("attractForce",attractForce)
.force("repelForce",repelForce)
.force("x", d3.forceX(width/2))
.force("y", d3.forceY(height/2))
.force('collision', d3.forceCollide().radius(function(d) {
return (radius+2);
}))
// .alphaTarget(.1)
.on("tick", ticked);
restart(0);
function restart(split){
if(split==0){
node = node.data(nodes, function(d) { return d.id;});
node.exit().remove();
node = node.enter().append("circle").attr("fill", function(d) { return d.color; }).attr("r", radius).merge(node);
simulation.nodes(nodes);
simulation.alpha(1).restart();
}else if(split==1){
d3.select("#comments").html("Dots split");
node = node.data(nodes, function(d) { return d.id;});
node.exit().remove();
node = node.enter().append("circle").attr("fill", function(d) { return d.color; }).attr("r", radius).merge(node);
// Update and restart the simulation.
simulation.nodes(nodes);
simulation.force("y", d3.forceY(height/2))
.force("A", isolate(d3.forceX(width), function(d) {
return (d.b == 2);
}))
.force("B", isolate(d3.forceX(0), function(d) {
return (d.b == 1);
}))
.on("tick", ticked);
// simulation.alpha(1).restart();
}else if(split==2){
d3.select("svg").style("background-color", "#ffffdd");
d3.select("#comments").html("Nothing happens here, but I'd like to clear out all the forces on the dots and have them return to the center");
node = node.data(nodes, function(d) { return d.id;});
node.exit().remove();
node = node.enter().append("circle").attr("fill", function(d) { return d.color; }).attr("r", radius).merge(node);
// Update and restart the simulation.
simulation.nodes(nodes);
simulation.force("x", d3.forceX(width/2))
.force("y", d3.forceY(height/2))
.force("A", null)
.force("B", null)
.on("tick", ticked);
simulation.alpha(1).restart();
}
function isolate(force, filter) {
var initialize = force.initialize;
force.initialize = function() { initialize.call(force, nodes.filter(filter)); };
return force;
}
}
setTimeout(function(){
restart(1);
}, 1000);
setTimeout(function(){
restart(2);
}, 4000);
function ticked() {
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
}
}
<head>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<p id="comments">Dots load</p>
</body>
我正在尝试创建一个在几个状态之间转换的群图,但遇到了一些障碍。我发现设置它的最佳方法是将我的节点聚集在中心,然后 isolate forceX and forceY 基于我的数据。然而,我发现一旦我这样做了,就不可能 'reset' 整个群体并将每个节点带回中心。即使我添加 forceCenters,似乎每个节点都开始相对于最后一个孤立的力移动。
诚然,我是 d3-force 的新手,所以这可能是一个愚蠢的问题,但我已经做了很多搜索但没有答案。
var width = 400;
var height = 150;
var radius = 3;
var data = [
{"id":1, "a":1, "b":1, "color":"#ff0000"},
{"id":2, "a":1, "b":2, "color":"#ff0000"},
{"id":3, "a":2, "b":1, "color":"#00ff00"},
{"id":4, "a":2, "b":2, "color":"#00ff00"},
{"id":5, "a":3, "b":1, "color":"#0000ff"},
{"id":6, "a":3, "b":2, "color":"#0000ff"},
];
$(document).ready(function(){
createGraph();
makeForce();
});
var svg;
function createGraph(){
svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", "#dddddd");
}
var simulation;
function makeForce(){
var nodes=data;
node = svg.append("g").attr("stroke", "#bbb").attr("stroke-width", .5).selectAll(".node");
var attractForce = d3.forceManyBody().strength(20).distanceMax(40).distanceMin(60);
var repelForce = d3.forceManyBody().strength(-10).distanceMax(50).distanceMin(10);
simulation = d3.forceSimulation(nodes)
.alphaDecay(0.03)
// .force("attractForce",attractForce)
.force("repelForce",repelForce)
.force("x", d3.forceX(width/2))
.force("y", d3.forceY(height/2))
.force('collision', d3.forceCollide().radius(function(d) {
return (radius+2);
}))
// .alphaTarget(.1)
.on("tick", ticked);
restart(0);
function restart(split){
if(split==0){
node = node.data(nodes, function(d) { return d.id;});
node.exit().remove();
node = node.enter().append("circle").attr("fill", function(d) { return d.color; }).attr("r", radius).merge(node);
simulation.nodes(nodes);
simulation.alpha(1).restart();
}else if(split==1){
d3.select("#comments").html("Dots split");
node = node.data(nodes, function(d) { return d.id;});
node.exit().remove();
node = node.enter().append("circle").attr("fill", function(d) { return d.color; }).attr("r", radius).merge(node);
// Update and restart the simulation.
simulation.nodes(nodes);
simulation.force("y", d3.forceY(height/2))
.force("A", isolate(d3.forceX(width), function(d) {
return (d.b == 2);
}))
.force("B", isolate(d3.forceX(0), function(d) {
return (d.b == 1);
}))
.on("tick", ticked);
// simulation.alpha(1).restart();
}else if(split==2){
d3.select("svg").style("background-color", "#ffffdd");
d3.select("#comments").html("Nothing happens here, but I'd like to clear out all the forces on the dots and have them return to the center");
node = node.data(nodes, function(d) { return d.id;});
node.exit().remove();
node = node.enter().append("circle").attr("fill", function(d) { return d.color; }).attr("r", radius).merge(node);
// Update and restart the simulation.
simulation.nodes(nodes);
simulation.force("x", d3.forceX(width/2))
.force("y", d3.forceY(width/2))
.on("tick", ticked);
// simulation.alpha(1).restart();
}
function isolate(force, filter) {
var initialize = force.initialize;
force.initialize = function() { initialize.call(force, nodes.filter(filter)); };
return force;
}
}
setTimeout(function(){
restart(1);
}, 1000);
setTimeout(function(){
restart(2);
}, 4000);
function ticked() {
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
}
}
<head>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<p id="comments">Dots load</p>
</body>
作为一个次要问题,如果有人能向我解释为什么 forceX()
ing 为 0 并且宽度不会将点带到边缘,那也会很有用。我想这源于我对上述内容的误解。
请记住,在模拟中注册的力将保持附加状态,直到您通过将它们设置为 null
:
# simulation.force(name[, force])
[…]
To remove the force with the given name, pass null as the force.
仅仅添加新势力不会影响任何之前添加的势力,只要他们的名字不同即可。要操纵已经附加到模拟的力,您需要 re-register 力/它的克隆/使用相同名称的新力。同样,对于 de-register 力,您将其设置为 null
.
要消除隔离力 "A"
和 "B"
,您需要执行以下操作:
simulation
.force("A", null)
.force("B", null);
这也回答了您的第二个问题,为什么使用具有值 0
和 width
的 d3.forceX
不会将圆定位在边界上。所有先前注册的力,即 "repelForce"
、"x"
、"y"
和 "collision"
,在添加新的隔离力 "A"
和 [=16= 时仍将应用].正是这六种力的组合决定了第二步圆圈的位置。
看看下面的工作演示:
var width = 400;
var height = 150;
var radius = 3;
var data = [
{"id":1, "a":1, "b":1, "color":"#ff0000"},
{"id":2, "a":1, "b":2, "color":"#ff0000"},
{"id":3, "a":2, "b":1, "color":"#00ff00"},
{"id":4, "a":2, "b":2, "color":"#00ff00"},
{"id":5, "a":3, "b":1, "color":"#0000ff"},
{"id":6, "a":3, "b":2, "color":"#0000ff"},
];
$(document).ready(function(){
createGraph();
makeForce();
});
var svg;
function createGraph(){
svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", "#dddddd");
}
var simulation;
function makeForce(){
var nodes=data;
node = svg.append("g").attr("stroke", "#bbb").attr("stroke-width", .5).selectAll(".node");
var attractForce = d3.forceManyBody().strength(20).distanceMax(40).distanceMin(60);
var repelForce = d3.forceManyBody().strength(-10).distanceMax(50).distanceMin(10);
simulation = d3.forceSimulation(nodes)
.alphaDecay(0.03)
// .force("attractForce",attractForce)
.force("repelForce",repelForce)
.force("x", d3.forceX(width/2))
.force("y", d3.forceY(height/2))
.force('collision', d3.forceCollide().radius(function(d) {
return (radius+2);
}))
// .alphaTarget(.1)
.on("tick", ticked);
restart(0);
function restart(split){
if(split==0){
node = node.data(nodes, function(d) { return d.id;});
node.exit().remove();
node = node.enter().append("circle").attr("fill", function(d) { return d.color; }).attr("r", radius).merge(node);
simulation.nodes(nodes);
simulation.alpha(1).restart();
}else if(split==1){
d3.select("#comments").html("Dots split");
node = node.data(nodes, function(d) { return d.id;});
node.exit().remove();
node = node.enter().append("circle").attr("fill", function(d) { return d.color; }).attr("r", radius).merge(node);
// Update and restart the simulation.
simulation.nodes(nodes);
simulation.force("y", d3.forceY(height/2))
.force("A", isolate(d3.forceX(width), function(d) {
return (d.b == 2);
}))
.force("B", isolate(d3.forceX(0), function(d) {
return (d.b == 1);
}))
.on("tick", ticked);
// simulation.alpha(1).restart();
}else if(split==2){
d3.select("svg").style("background-color", "#ffffdd");
d3.select("#comments").html("Nothing happens here, but I'd like to clear out all the forces on the dots and have them return to the center");
node = node.data(nodes, function(d) { return d.id;});
node.exit().remove();
node = node.enter().append("circle").attr("fill", function(d) { return d.color; }).attr("r", radius).merge(node);
// Update and restart the simulation.
simulation.nodes(nodes);
simulation.force("x", d3.forceX(width/2))
.force("y", d3.forceY(height/2))
.force("A", null)
.force("B", null)
.on("tick", ticked);
simulation.alpha(1).restart();
}
function isolate(force, filter) {
var initialize = force.initialize;
force.initialize = function() { initialize.call(force, nodes.filter(filter)); };
return force;
}
}
setTimeout(function(){
restart(1);
}, 1000);
setTimeout(function(){
restart(2);
}, 4000);
function ticked() {
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
}
}
<head>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<p id="comments">Dots load</p>
</body>