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

我能夠從朋友Shirley Wu那里得到一些建議（謝謝！），她指出問題是，每次viz更新時，它都會調用圖表功能，這是好的，但我有這個部分在我的圖表功能：svg.append（“g”）。

這意味着每次調用該圖表時，都會附加一個新的g元素，而不是使用已存在的元素。 這就是我每次都獲得一組新路徑的原因，因為我每次創建一個新g然后用路徑填充它。

解決方案是：（1）僅在第一次創建ag元素，並記住它對圖表函數的任何后續調用，或者（2）在圖表函數中創建g元素，然后具有單獨的更新函數獲取該g元素並更新其中的路徑

我使用選項1並在圖表函數中編輯了部件，如下所示：為了不每次都創建一個新g：

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/