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/