D3可重複使用的圓形熱圖表無法成功更新

Question

我使用D3可重複使用的圖表框架來創建一個圓形熱圖表來顯示聲學數據。我無法成功更新數據。當我嘗試更新數據而不是更新現有g元素中的路徑時，它會繪製新的g元素。我創建了兩個圖表來查看我的可重用框架是否工作，並且僅在第一個圖表上測試數據更新。出於某種原因，當我嘗試更新第一個圖表時，顏色也會更改爲第二個圖表的顏色。這裏是一個問題的圖像：

我認爲這個問題可能與我如何創建svg和g元素有關，但我無法弄清楚具體問題是什麼。在我的可重複使用的模塊，這是我正在創建的SVG和元素和部分：

svg.enter().append("svg") 
      .classed("chart", true) 
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height + margin.top + margin.bottom); 


     var g = svg.append("g") 
      .classed("circular-heat"+_index, true) 
      .attr("transform", "translate(" + parseInt(margin.left + offset) + "," + parseInt(margin.top + offset) + ")"); 

     var segments = g.selectAll("path").data(data); 

這裏是一個的jsfiddle我的代碼。

https://jsfiddle.net/jhjanicki/s3gsae5p/1/

Answer 1

我能夠從一個朋友，吳觀鳳（謝謝！）得到一些建議，她指出，問題是，每一次即更新，它調用了圖表功能，是好的，但我有這部分在我的圖表函數：svg.append（「g」）。

這意味着每次調用該圖表時，都會添加一個新的g元素，而不是使用已存在的元素。這就是爲什麼我每次都得到一組新的路徑，因爲我正在創建一個新的g，然後每次都用路徑填充它。

解決方法是： （1）只在第一次創建ag元素時，記住它以便隨後調用圖表函數，或者在圖表函數中創建g元素，或者然後有一個單獨的更新函數，它使g元件和內更新的路徑它

我使用選項1和編輯圖表的功能，以便不每次創建一個新的克以下中的一部分：

if(svg.select('g.circular-heat')[0][0] == null){ 
       var g = svg.append("g") 
        .classed("circular-heat", true) 
        .attr("transform", "translate(" + parseInt(margin.left + offset) + "," + parseInt(margin.top + offset) + ")"); 
      } 

這裏是更新的小提琴 https://jsfiddle.net/jhjanicki/h93ka17y/