Geek Answers Handbook

How to update a pie chart using d3.js

I have two different data sets, and I'm trying to create pie charts with the first set, and then listen to the event and go to the second set.

I can successfully create pie charts from the first dataset using this code

var data = [[70, 30],[60, 40],[50, 50],[95, 5],[87, 13]];

progress.pie.vars.svg = d3.select( progress.pie.vars.pieEl ).selectAll("svg")
          .data(data)
          .enter()
          .append("svg")
            .attr("width", 150)
            .attr("height", 150)
          .each(function(d) { this.currentAngles = d; }); // store the initial angles;

progress.pie.vars.path = progress.pie.vars.svg.selectAll("path")
          .data(function(d, i){ return pie(d) })
          .enter().append("path")
            .attr("fill", function(d, i) { return color(i); })
            .attr("transform", "translate(" + 75 + ", " + 75 + ")")
            .attr("d", arc);

Note. I use hardcoding data here, I can replicate using JSON, but I wanted to simplify everything so that I can work with transitions.

This creates svg and displays them on the page, but the problem occurs when I use a different dataset and try to update the paths. Like this...

var data = [[60, 40], [10, 10, 10, 70], [30, 70], [25, 25, 25, 25], [30, 35, 35]];

progress.pie.vars.svg = progress.pie.vars.svg.selectAll("svg")
          .data(data);

progress.pie.vars.path = progress.pie.vars.path
          .data(function(d, i){ return pie(d) })
          .enter().append("path")
            .transition()
            .duration(5000);

I have researched the general d3 update pattern, but still do not understand.

If anyone has suggestions on how to solve my problem or improve my code, then they really appreciate it :)

thanks

0
1

progress.pie.vars.svg , selectAll("svg"). svg svg. data .

progress.pie.vars.path , ( d, ). . , :

progress.pie.vars.path = progress.pie.vars.path
    .data(function(d, i){ return pie(d) });

progress.pie.vars.path.enter().append("path");

progress.pie.vars.path.attr("d", arc);

, , , , . ( , ).

.

+1

More articles:


All Articles