D3 reusable circular heat chart cannot successfully update

Question

I am using the D3 reusable chart framework to create a circular heat chart to visualize acoustic data. I am not able to successfully update the data. When I try to update the data instead of updating the paths in the existing g element it draws new g elements. I created two charts just to see if my reusable framework works, and am testing data update only on the first chart. For some reason when I try to update the first chart, the colors also change to that of the second chart. Here is an image of the problem:

I think the problem may related to how I am creating the svg and g elements, but I can't figure out what the specific problem is. In my reusable module this is how I am creating the svg and elements and the segments:

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);

And here is a JSFiddle with my code.

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

Answer 1

I was able to get some advice from a friend, Shirley Wu (thank you!), and she pointed out that the problem is that every time the viz updates, it's calling the chart function, which is ok but I have this part in my chart function: svg.append("g").

Which means that every time that chart is called, a new g element is appended instead of using the one that already exists. That's why I was getting a new set of paths every time, since I was creating a new g and then filling that with paths every time.

The solution is to either: (1) Create ag element only the first time around, and remember it for any subsequent calls to the chart function, OR (2) Create the g element in the chart function, and then have a separate update function that takes that g element and updates the paths within it

I used option 1 and edited the part within the chart function as the following in order not to create a new g every time:

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) + ")");
            }

Here is the updated fiddle https://jsfiddle.net/jhjanicki/h93ka17y/