更改力佈局

首先力佈局中使用的數據，我得到我的數據：

var dataNetwork = creationTableaux(seuil);

哪裏creationTableaux是給我我的數據，根據不同的功能節點和鏈接我要

的號碼，然後我創建模擬

 var simulation = d3.forceSimulation() 
      .force("link", d3.forceLink().id(d => d.id)) 
      .force("charge", d3.forceManyBody().strength(-250)) 
      .force("center", d3.forceCenter(width/2, height/2)); 

     var link = canevas2.append("g") 
     .attr("class", "links") 
     .selectAll("line") 
     .data(dataNetwork.links) 
     .enter() 
     .append("line") 
     .attr("stroke", "lightblue") 
     .attr("stroke-width", d => 6 * d.value); 

     var node = canevas2.append("g") 
     .attr("class", "nodes") 
     .selectAll("circle") 
     .data(dataNetwork.nodes) 
     .enter() 
     .append("circle") 
     .attr("r", 5) 
     .attr("fill", "lightblue"); 

     simulation.nodes(dataNetwork.nodes).on("tick", ticked); 

     simulation.force("link").links(dataNetwork.links); 

     function ticked() { 
      link 
       .attr("x1", function(d) { 
        return d.source.x; 
       }) 
       .attr("y1", function(d) { 
        return d.source.y; 
       }) 
       .attr("x2", function(d) { 
        return d.target.x; 
       }) 
       .attr("y2", function(d) { 
        return d.target.y; 
       }); 

      node 
       .attr("cx", function(d) { 
        return d.x; 
       }) 
       .attr("cy", function(d) { 
        return d.y; 
       }); 
     }

這很好，所以我知道（至少！）這是正確的。現在，所有這一切都包含在另一個函數中，我可以在其中注入不同的csv文件，其中的鏈接和節點以及未被繪製的文件將被繪製。我用一個按鈕調用這個函數，例如當我調用這個函數兩次時，這兩個圖形同時在我的頁面上。

我試圖遵循一些例子，如this one，但我卡住了。我知道問題來自於所有節點和鏈接都使用enter()來調用，並且應該有一個exit().remove()，但我應該如何解決這個問題是一個謎。

來源

2017-08-05 Arnaud Stephan

所以我終於找到了一個這樣做的方法。在啓動模擬之前，我只需刪除所有預先存在的元素。

canevas2.selectAll("line").remove(); 
canevas2.selectAll("circle").remove(); 
canevas2.selectAll("text").remove();

看不清楚爲什麼我以前沒有想過它！

編輯：當然這種方法的缺點是，「過渡」（如果它可以稱爲過渡）不會很平滑，因爲每次都會重新繪製圖表。但它總比沒有好:)

來源

2017-08-07 14:23:33

回答

相關問題