simple d3.js pie chart transitions *without* data joins?

问题

I'm working with a data set that's categorically identical from year to year, and I want to make a D3 pie chart with animated transitions from year to year. The data is in a 2-d array, each inner array is a year. Because the number of values isn't changing, I think I can just replace the data set for the transition, and I don't need to do a data join (?).

I have the pie chart working well initially, and I'm updating the data via click event. But my transitions aren't working. Here's the code for the first pie chart (there are variable declarations and other data managing that I've left out to save space, and because that stuff's working):

var outerRadius = w/2;
var innerRadius = 0;
var arc = d3.svg.arc()
                .innerRadius(innerRadius)
                .outerRadius(outerRadius);
var svg= d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

var arcs = svg.selectAll("g.arc")
                .data(pie(datamod[0]))
                .enter()
                .append("g")
                .attr("class", "arc")
                .attr("transform", "translate(" + outerRadius + ", " +outerRadius + ")");

arcs.append("path")
            .attr("fill", function(d,i){
                return colors[i];
            })
            .attr("d", arc);

And then to update...clickToChange() is called when users click anywhere in the body. it's loading new data from the next spot in the 2-d array and also updates text for the year, and there's some code in here to keep it from restarting if it's already running... But the main problem I think is with the code to update the arcs...

                function clickToChange()
        {   if(!isRunning)
            {
            isRunning = true;
            myTimer =setInterval(function() {if (yearcounter < 11)
                {
                    yearcounter++;
                }
                else
                {
                    yearcounter = 0;
                    stopDisplay();
                }

                var thisyear = 2000 +  yearcounter;             //updating happens here...      
                svg.selectAll("g.arc")
                                .data(pie(datamod[yearcounter]))
                                .transition()
                                .attr("class", "arc")
                                .attr("transform", "translate(" + outerRadius + ", " +outerRadius + ")");

                arcs.attr("fill", function(d,i){
                                return colors[i];
                                // console.log(d.value);
                                //              return "rgb(" + colorscale(d.value) + ",50,50)";

                            })
                            .attr("d", arc);

                    document.getElementById('year').innerHTML = thisyear;
        }, 2000); //end set interval
        }//end if
    }

    function stopDisplay()
    {
    clearInterval(myTimer);
    isRunning = false;
    }

I think the problem is that I'm possibly not binding the data properly to the correct elements, and if I'm using the correct notation to select the arcs?

回答1:

Okay, I can see multiple issues/drawbacks with your approach.

1) In your code:

arcs.append("path")
    .attr("fill", function(d,i){
        return colors[i];
    })
    .attr("d", arc);

arc is a function call that you are making that doesn't actually exist in the code that you have shared with us, or you need to write. You have this arc function call multiple times, so this will need to be addressed.

2) I would check into using the .on("click", function(d,i) { do your transitions here in this function call }); method instead of setting the transition and attributes of each of the items. I have found that it makes the transition calls easier to manage if you start doing anything more fancy with the transitions. You can see an example of what I mean in the Chord Diagram at http://bl.ocks.org/mbostock/4062006

Hopefully this helps you out a bit.

来源：https://stackoverflow.com/questions/19666526/simple-d3-js-pie-chart-transitions-without-data-joins