1

我正在尝试创建一个在几个状态之间转换的群体图，但遇到了一些障碍。我发现设置它的最佳方法是将我的节点聚集在中心，然后根据我的数据隔离 forceX 和 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()ing 为 0 并且宽度不会将点带到边缘，那也很有用。我想这源于我对上述内容的误解。

4

1 回答 1

2

请记住，在模拟中注册的力将保持连接，直到您通过将它们设置为移除它们null：

# 模拟。力（名称[，力]）

[…]

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

只是增加新的势力，只要名称不同，就不会影响之前添加的势力。要操纵已经附加到模拟的力，您需要使用相同的名称重新注册力/其克隆/新力。同样，要取消注册力，请将其设置为null.

要消除隔离力"A"，"B"您需要执行以下操作：

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

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

看看下面的工作演示：

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>

于 2018-03-13T09:24:19.550 回答