D3 Reusable Heat Pie Chart Can't Update Successfully
I am using the D3 reusable circuit to create a heat pie chart for visualizing acoustic data. I cannot update the data successfully. 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 to test if my reusable structure is working and only check the data on the first chart. For some reason, when I try to update the first graph, the colors also change to the colors of the second graph. Here is an image of the problem:
I think the problem might be related to the way I create the svg and g elements, but I can't figure out what the specific problem is. In my reusable module, this is how I create svg and elements and 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.
source to share
I got some advice from a friend, Shirley Wu (thanks!) And she pointed out that the problem is that every time the viz is updated it calls the chart function, which is fine, but I have this part in my chart function: svg.append ("g").
This means that every time this graph is called, a new g element is added instead of using the one that already exists. So every time I got a new set of paths as I was creating a new g and then filling it with paths each time.
Solution: (1) Create g element only the first time and remember it for any subsequent calls to the chart function, OR (2) Create g element in the chart function and then add a separate update function that takes that g element and updates the paths inside it ...
I used parameter 1 and edited the part in the chart function as follows so that I don't 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/
source to share