Question

我正在尝试创建一个在几个州之间转换的群图，但却遇到了一些障碍。我发现设置它的最好方法是将我的节点集中在中心，然后根据我的数据isolate forceX and forceY。但是，我发现，一旦我这样做了，就不可能“重置”整个群体，只需将每个节点带回中心。即使我添加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()为0并且宽度不会将点带到边缘，那么这也是有用的。我想这源于我对上述的误解。

Answer 1

请注意，在模拟中注册的力量将保持附加状态，直到您通过将它们设置为null来移除它们为止：

# 模拟。强制（名称 [，强制]）

[...]

要删除具有给定名称的力，请将强制作为
传递。

只要名称不同，添加新力量不会影响以前添加的任何力量。要操纵已经附加到模拟的力，您需要使用相同的名称重新注册力/克隆/新力。同样，要取消注册一个部队，请将其设置为null。

要移除您需要执行的隔离力"A"和"B"：

simulation
  .force("A", null)
  .force("B", null);

这也回答了您的第二个问题，为什么使用值d3.forceX和0的{{1}}不会将圆圈定位在边界上。所有先前注册的部队，即width，"repelForce"，"x"和"y"，仍会在添加新的隔离部队"collision"和{{1}时应用}。正是这六种力的组合决定了第二步中圆的位置。

查看以下工作演示：

＆＃13;

"A"

＆＃13;

"B"

＆＃13;

在d3 forceSimulation

1 个答案: