Question

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

我试图在点击图例键时删除圆圈的填充，这是有效的，但显然不会使力量发挥作用..

我在blockbuilder.org上的代码：http://blockbuilder.org/dwoltjer/04a84646720e1f82c16536d5ef9848e8

Answer 1

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

但是，如果您希望节点飞离屏幕（并重新开启），那么我所做的（使用V4）就是将节点移动到屏幕外的新forcePoint：

 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.
     });

Answer 2

您可以将过滤后的数据视为新数据并应用update，enter和exit模式：

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

   node.exit().remove();


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

legend的点击事件：

  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);

        });

以下是更新blocks

d3强制有向图节点在滤波后保持在固定位置

2 个答案: