d3強制有向圖節點在過濾器後保持固定位置

Question

在我的d3力導向散點圖中，我嘗試通過單擊圖例鍵使點消失並重新出現。點擊圖例鍵後，我希望剩餘的點重新組合，而不是保持固定在相同的位置，留下空格（屏幕截圖）。當再次點擊圖例時，他們應該再次飛入。

我想在點擊一個按鍵的傳說，這是努力消除圓的填充，但obviouly不會使力做它的工作..上blockbuilder.org

我的代碼：http://blockbuilder.org/dwoltjer/04a84646720e1f82c16536d5ef9848e8

Answer 1

你可以把過濾後的數據作爲新的數據和應用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

Answer 2

簡單地刪除節點應該足以使力重新排列並重新組合節點。但是，您需要保存節點以將其恢復（可能使用臨時數組）。

但是，如果你想要的節點飛出屏幕（回），那麼我會做（使用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. 
    });