javascript - 过滤掉节点并将其置于非事件状态

Question

我正在使用 d3.js 和强制布局。现在，根据这个问题的答案: Change the collision behavior of many nodes stored in an array

通过点击“点击我”按钮，可以过滤掉红色节点并推开其他节点(增加碰撞属性)。它工作得很好，但现在我希望蓝色节点不受红色节点推开 Action 的影响。这意味着，绿色和黄色节点被推开，但蓝色节点保留在原始位置。所以我正在寻找一种方法来使这些蓝色节点在力布局中处于非事件状态。也许你们中的一些人可以提供帮助。谢谢大家!

var svg = d3.select("svg");

var colours = ["blue", "red", "green", "yellow"];

var data = d3.range(30).map(d => ({
    r: 6
}));

var simulation = d3.forceSimulation(data)
    .force("x", d3.forceX(150).strength(0.05))
    .force("y", d3.forceY(75).strength(0.05))
    .force("collide", d3.forceCollide(function(d) {
        return d.r + 1;
    }));

var node = svg.selectAll(".circles")
    .data(data)
    .enter()
    .append("circle")
    .attr("r", d => d.r)
    .attr("fill", (d, i) => colours[i%4]);

d3.select("button").on("click", function(d) {
		node.filter(function(){
		 return d3.select(this).attr("fill") === "red"
		}).each(d=>d.r = 40);
    simulation.nodes(data);
    simulation.alpha(0.8).restart();
})

simulation.nodes(data)
    .on("tick", d => {
        node.attr("cx", d => d.x).attr("cy", d => d.y);
    });

<script src="https://d3js.org/d3.v4.min.js"></script>
<button>Click me</button>
<br>
<svg></svg>

Answer 1

执行此操作的一种方法是检查模拟是否是第一次运行，如果不是，则过滤掉蓝色圆圈:

simulation.nodes(data)
    .on("tick", d => {
        if (firstTime) {
            node.attr("cx", d => d.x).attr("cy", d => d.y);
        } else {
            node.filter(function(e) {
                return d3.select(this).attr("fill") != "blue"
            }).attr("cx", d => d.x).attr("cy", d => d.y);
        }
    });

这是演示:

var svg = d3.select("svg");

var firstTime = true;

var colours = ["blue", "red", "green", "yellow"];

var data = d3.range(30).map(d => ({
  r: 6
}));

var simulation = d3.forceSimulation(data)
  .force("x", d3.forceX(150).strength(0.05))
  .force("y", d3.forceY(75).strength(0.05))
  .force("collide", d3.forceCollide(function(d) {
    return d.r + 1;
  }));

var node = svg.selectAll(".circles")
  .data(data)
  .enter()
  .append("circle")
  .attr("r", d => d.r)
  .attr("fill", (d, i) => colours[i % 4]);

d3.select("button").on("click", function(d) {
  firstTime = false;
  node.filter(function() {
    return d3.select(this).attr("fill") === "red"
  }).each(d => d.r = 40);
  simulation.nodes(data);
  simulation.alpha(0.8).restart();
})

simulation.nodes(data)
  .on("tick", d => {
    if (firstTime) {
      node.attr("cx", d => d.x).attr("cy", d => d.y);
    } else {
      node.filter(function(e) {
        return d3.select(this).attr("fill") != "blue"
      }).attr("cx", d => d.x).attr("cy", d => d.y);
    }
  });

<script src="https://d3js.org/d3.v4.min.js"></script>
<button>Click me</button>
<br>
<svg></svg>

顺便说一句，您想要的结果(“绿色和黄色节点被推开，但蓝色节点保持在原始位置”)在视觉上令人不快。