How to update a D3 pie chart

Question

http://jsfiddle.net/z25SU/

I'm sorry, I realize there's tons of material on how to do this, and I've been though a few tutorials and looked though several of the official gists (like this one), but I still can't figure this out.

As you'll see in my jsfiddle, the chart renders with the first set of data fine - but the chart doesn't change at all when I click the update button.

The update method does fire, and the paths' "d" values are updated (as confirmed by watching those elements in Firebug) - it's just that the paths' new "d" values are the same as the old ones.

What do I need to do differently here? I've been slamming my head against this wall for hours now, trying every different thing the docs and tutorials have said - I just can't figure it out.

Thanks!

Also, here's the update method - someone will probably spot the issue without even having to look at the fiddle...

function updateData(dataset){
    //console.info(dataset);

    // Set Data
    var allSlices = slicesGroup
            .selectAll(".slice")
                .data(pie(dataset));

    // Create New Slices
    var newSlices = allSlices
            .enter()
            .append("g")
                .attr("class", "slice");

    newSlices
        .append("g")
            .attr("class", "outer")
            .append("path");

    newSlices
        .append("g")
            .attr("class", "inner")
            .append("path");

    // Update All Slices
    allSlices
        .selectAll(".outer")
            .selectAll("path")
                .attr("d", outerArc);

    allSlices
        .selectAll(".inner")
            .selectAll("path")
                .attr("d", innerArc);

    //console.log(newSlices);
    //console.log(allSlices);

    // Remove Old Slices
    allSlices.exit().remove();
};

Answer 1

The problem is related to your nested data structure. Your new data is getting succesfully joined to your "slice" <g> elements, but not to your "inner" and "outer" <g> elements and the <path> elements themselves.

The fix is simple but non-intuitive. Replace allSlices.selectAll(".inner").selectAll("path") with allSlices.select(".inner").select("path") and the same for the "outer" group.

http://jsfiddle.net/z25SU/1/

With selection.select() the selected element inherits the updated data from the parent, versus in .selectAll() any existing data is not changed. This important difference isn't very often emphasized in tutorials. However, it makes sense -- if you are selecting many elements with selectAll they should each have their own data, it would not make sense to have them all receive the same value from the parent.

Answer 2

I have changed the enter, update code. Here is the FIDDLE.

You can use data2 or data3 in the update function.

// enter selection
var newSlices = allSlices.enter()
    .append("g")
    .attr("class", "slice");

// update selection
allSlices.append("g")
    .attr("class", "outer")
    .append("path")
    .attr("d", outerArc);

// update selection
allSlices.append("g")
    .attr("class", "inner")
    .append("path")
    .attr("d", innerArc);