D3 Reusable Circular Heat Chart Cannot Successfully Update

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

Solution 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 a g 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/