个人中心
gpt4 book ai didi

javascript - 重置 d3 forceSimulation 中的所有隔离力

转载 作者：行者123 更新时间：2023-11-30 14:43:53 24 4
gpt4 key购买 nike

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

最佳答案

请记住，在模拟中注册的力将保持附加状态，直到您通过将它们设置为 null 将其移除:

# simulation.force(name[, force])

[…]

To remove the force with the given name, pass null as the force.

只要名称不同，仅添加新势力不会影响任何先前添加的势力。要操纵已经附加到模拟的力，您需要使用相同的名称重新注册该力/它的克隆/新力。类似地，要取消注册您将其设置为 null 的强制。

要移除隔离力 "A" 和 "B"，您需要执行以下操作:

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

这也回答了你的第二个问题，为什么使用值为 0 和 width 的 d3.forceX 不会将圆定位在边界上.所有先前注册的力，即 "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>

关于javascript - 重置 d3 forceSimulation 中的所有隔离力，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49248627/

24 4 0
文章推荐： c# - SAML 断言中的 AudienceRestriction
文章推荐： c - 有没有办法动态设置从 fgets() 获得的字符串的大小？
文章推荐： C - 为什么这个函数将数组打印为 NULL 字符串？
文章推荐： javascript - 如何根据 javascript 变量选择输入标签的类型属性作为条件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com