D3.js將增加單時

我下面這個例子不工作拖動圈：D3.js將增加單時

https://bl.ocks.org/mbostock/6123708

我無法理解的事情是當單擊按鈕時，我都不可能增加新的社交圈，例如：

d3.tsv("dots.tsv", dottype, function (error, dots) { 
    container.append("g") 
       .attr("class", "dot") 
       .selectAll("circle") 
       .data(dots) 
       .enter().append("circle") 
       .attr("r", 5) 
       .attr("cx", function (d) { 
        return d.x; 
       }) 
       .attr("cy", function (d) { 
        return d.y; 
       }) 
       .call(drag); 
     }); 

     function dottype(d) { 
      d.x = +d.x; 
      d.y = +d.y; 
      return d; 
     } 
self.addNode = function() { 
      container.append('g') 
       .attr('class', 'dot') 
       .append('circle') 
       .attr('r', 35) 
       .attr('cx', (i * 100) + cx) 
       .attr('cy', (i * 100) + cy) 
       //.style('fill', 'purple') 
       .call(drag); 
      i++; 
     };

第一部分是相同的例子中，我然後創建了一個函數來添加所述容器內的單圈，問題是，當我拖動新添加的圓我可以僅移動外部G元素，從而移動每個o一起圈。

我不明白爲什麼，因爲功能都是一樣的（我刪除甚至風格「補」，以確保）

來源

2016-05-06 Gianmarco

您可以分享您已經完成的關於如何將新節點添加到d3佈局的研究嗎？例如：https：//bl.ocks.org/mbostock/1095795。你必須更新你的圖形數據。你在做什麼只是添加一個html元素到你的容器元素，並會在d3渲染你的新svg後消失。 – echonax

我剛剛做了你所說的，我沒有意識到partiuclar佈局，因爲我沒有看到任何d3函數，只是tsv來讀取數據。也許我錯過了什麼？我的代碼完全錯了嗎？ – Gianmarco

你是給你佈局的數據.data(dots)但是當你添加一個節點在你的addNode函數中，佈局不知道這個新數據。你想要的是添加/推新節點數據到你的數據數組（點），並調用繪圖功能。

因此，您應該將d3.tsv下的代碼切成函數，以便在更新數據時再次調用它。

來源

2016-05-06 08:28:31 echonax

如果您可以放一個小提琴或plunkr，我們可以幫助更詳細。 – echonax

我現在將我的數據保存到更新的var（例如'dots.push'），然後selectAll.enter.append（重新渲染） – Gianmarco

D3.js將增加單時

回答

相關問題