D3.js d3力定向图节点在过滤后保持在固定位置

在我的d3力定向散点图中，我试图通过点击图例键使点消失并重新出现。单击图例键后，我希望剩余的点重新组合，而不是固定在同一位置，留下空白（屏幕截图）。再次单击图例时，它们应再次飞入

我试图在单击图例键时删除圆圈填充，该键正在工作，但显然无法使原力发挥作用

我在blockbuilder.org上的代码：

---

只需删除节点就足以使力重新排列自身并再次对节点分组。但是，您需要保存节点以使其返回（可能使用临时数组）

但是，如果您希望节点飞离屏幕（并返回屏幕），那么我要做的（使用V4）是将节点移动到屏幕外的新力点：

 legend.append("rect")
    .attr("x", width - 18)
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", color)
    .on("click", function (d) {
      node.filter(function () {
           return this.dataset.bank === d;
           })
            position
           .force('x', d3.forceX(width/2).strength(20))
           .force('y', d3.forceY(height*2).strength(20));//should be twice the height of the svg, so way off the y axis. Or whichever direction you choose.
     });

---

简单地删除节点应该足以使力重新排列自身并再次对节点分组。但是，您需要保存节点以使其返回（可能使用临时数组）

但是，如果您希望节点飞离屏幕（并返回屏幕），那么我要做的（使用V4）是将节点移动到屏幕外的新力点：

 legend.append("rect")
    .attr("x", width - 18)
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", color)
    .on("click", function (d) {
      node.filter(function () {
           return this.dataset.bank === d;
           })
            position
           .force('x', d3.forceX(width/2).strength(20))
           .force('y', d3.forceY(height*2).strength(20));//should be twice the height of the svg, so way off the y axis. Or whichever direction you choose.
     });

---

您可以将过滤后的数据视为新数据，并应用

更新

、

输入

和

退出

模式：

   var node = svg.selectAll(".dot")
      .data(data);

   node.exit().remove();


   node.enter().append("circle") 
      .attr("class", "dot")
      .attr("r", radius)
   ......

图例的单击事件

：

  legend.append("rect")
        .attr("x", width - 18)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", color)
        .on("click", function (d) {

                        visible[d] = !visible[d];
                        var newdata = data.filter(function(e) { return visible[e.bank];});

                        DrawNode(newdata);

        });

---

以下是更新

您可以将过滤后的数据视为新数据，并应用

更新

，

输入

和

退出

模式：

   var node = svg.selectAll(".dot")
      .data(data);

   node.exit().remove();


   node.enter().append("circle") 
      .attr("class", "dot")
      .attr("r", radius)
   ......

图例的单击事件

：

  legend.append("rect")
        .attr("x", width - 18)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", color)
        .on("click", function (d) {

                        visible[d] = !visible[d];
                        var newdata = data.filter(function(e) { return visible[e.bank];});

                        DrawNode(newdata);

        });

---

这是最新消息

你好，马塞洛，非常感谢，正是我所需要的！！动画现在有一件事：当点击“交换x轴变量”按钮几次时，动画会冻结，只有在点击图例键后才会重新启动。有什么想法吗？@WoltjerD:d3.force在

DrawNode

函数中定义。交换轴的函数正在调用

force.resume

，但是

force

在

DrawNode

之外未定义。我已经更新了块以调用

DrawNode

它调用的所有

force.resume

。你好，Marcelo，非常感谢，这正是我需要的！！动画现在有一件事：当点击“交换x轴变量”按钮几次时，动画会冻结，只有在点击图例键后才会重新启动。有什么想法吗？@WoltjerD:d3.force在

DrawNode

函数中定义。交换轴的函数正在调用

force.resume

，但是

force

在

DrawNode

之外未定义。我已经更新了块来调用

DrawNode

它调用的所有地方

force.resume

。嗨，奥利弗，在屏幕外使用点的好主意！我可以用这个。我想我会首先坚持马塞洛的解决方案。嗨，奥利弗，在屏幕外使用点的好主意！我可以用这个。我想我会首先坚持马塞洛的解决方案。