如何使用更新的数据集更新d3.js饼图

Question

I've mixed and matched a lot of code from other sources.

Currently, the pie chart displays fine, but when I select a different server in the drop-down menu, it fails to update the picture. The console logs show that dataset is indeed being changed. I checked online and it seems like my elements are not being removed correctly? However, whenever I try to use path.exit().remove() it fails to display anything.

Here is my code and jsfiddle: http://jsfiddle.net/36q95k1c/2/

var ds1 = [1,1,1,1,1,1,1,3,0,0];
var ds2 = [0,0,0,1,1,1,1,1,1,1];
var ds3 = [0,0,1,1,0,0,0,0,0,0];
var ds4 = [0,0,2,0,5,3,0,0,0,0];
var ds5 = [0,0,0,0,0,0,0,0,0,0];
var ds6 = [0,0,0,0,0,0,0,0,0,0];
var ds7 = [0,0,0,0,0,0,0,0,0,0];
var ds8 = [0,0,0,0,0,0,0,0,0,0];
var ds9 = [0,0,0,0,0,0,0,0,0,0];
var ds10 = [0,0,0,0,0,0,0,0,0,0];
var ds11 = [0,0,0,0,0,0,0,0,0,0];
var ds12 = [0,0,0,0,0,0,0,0,0,0];
var ds13 = [0,0,0,0,0,0,0,0,0,0];
var ds14 = [0,0,0,0,0,0,0,0,0,0];



var dataset = {inner: [4,1,31,28,13,65,6,6,4,3],
    middle: ds1,
    outer: [1175,1802,8126,11926,37264,4267,2961,2909,850,12432]};

var victim_total = 4+1+31+28+13+65+6+6+4+3;
var killer_total = 22+4+37+72+2+20+2+11+3+3;
var general_total = 1175+1802+8126+11926+37264+4267+2961+2909+850+12432;
var legendRectSize = 25;
var legendSpacing = 6;



//Width and height
var w = 750;
var h = 750;
var r = 100;
var donutWidth = 225


var outerRadius = w / 2;
var innerRadius = donutWidth;
var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);

var pie = d3.layout.pie()
    .sort(null);

// Easy colors accessible via a 10-step ordinal scale
var color = d3.scale.category20();

// Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", 2*w)
    .attr("height", h)
    .append('g')
    .attr('transform', 'translate(' + (w / 2) + 
    ',' + (h / 2) + ')');

// Define the div for the tooltip
var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);


function updateLegend(newData) {
    //https://dl.dropboxusercontent.com/s/hfho50s0xd2dcpn/craftinggeneralstats1.csv?dl=1"
    //https://dl.dropboxusercontent.com/s/i152v8ccetr5gj0/craftinggeneralstats.csv?dl=1
    //Import CSV file
d3.csv("https://dl.dropboxusercontent.com/s/i152v8ccetr5gj0/craftinggeneralstats.csv?dl=1", function(data) {
  data.forEach(function(d) {
    d.outer = +d.count;
    d.middle = +d.countkiller;
    d.inner = +d.countvictim;
    d.label = d.label;
  });
 // function updateLegend(newData) {
  /*var step;
  for (step = 0; step < 10; step++) {
  // Runs 5 times, with values of step 0 through 4.
  data[step].countkiller = 1;
}*/
//data[i].countkiller = 0;
console.log(dataset.middle);
// Set up groups
var arcs = svg.selectAll("g.arc")
    .data(d3.values(dataset));
    arcs.enter()
    .append("g")    
    .attr("class", "arc")
    .attr("transform", "translate(" +0+ "," +0+ ")");



var path = arcs.selectAll("path")
    .data(function(d) { return pie(d); });
  path.enter().append("path")
  .on("mouseover", function(d, i, j) { 
 // console.log(d);
  //console.log(dataset.middle[3]);
     div.transition()       
                .duration(200)      
                .style("opacity", .9)
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px");
            if (j ==0)
                div.html("Victim" + "<br/>" + Math.round(1000 * d.value / victim_total) / 10 +"%")
            if (j ==1)
                div.html("Killer" + "<br/>" + Math.round(1000 * d.value / killer_total) / 10 +"%")
            if (j ==2)
            {
                div.html("Overall" + "<br/>" + Math.round(1000 * d.value / general_total) / 10 +"%")
                }

            })                  
        .on("mouseout", function(d) {       
            div.transition()        
                .duration(500)      
                .style("opacity", 0);   
        })
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", function(d, i, j) { return arc.innerRadius(10+r*j).outerRadius(r*(j+1))(d); });


   // .attr("text-anchor", "middle")
   /* .text(function (d, i) {
    return data[i].label;
});*/


// Setup legend
 var legend = svg.selectAll('.legend')                     
          .data(color.domain())                                   
          .enter()                                                
          .append('g')                                            
          .attr('class', 'legend')                                
          .attr('transform', function(d, i) {                     
            var height = legendRectSize + legendSpacing;          
            var offset =  height * color.domain().length / 2;     
            var horz = -2 * legendRectSize;                       
            var vert = i * height - offset;                       
            return 'translate(' + (horz +(w/2)) +  ',' + vert + ')';        
          });                                                     

        legend.append('rect')                                     
          .attr('width', legendRectSize)                          
          .attr('height', legendRectSize)                         
          .style('fill', color)                                   
          .style('stroke', color)                                   
            .on('click', function(label) {                            
              var rect = d3.select(this);                             
              var enabled = true;                                     


              if (rect.attr('class') === 'disabled') {                
                rect.attr('class', '');                               
              } else {                                                
                if (totalEnabled < 2) return;                         
                rect.attr('class', 'disabled');                       
                enabled = false;                                      
              }                                                       

              pie.value(function(d) {                                 
                if (d.label === label) d.enabled = enabled;           
                return (d.enabled) ? d.count : 0;                     
              });                                                    
              arcs = arcs.data(d3.values(dataset))                                 
            });                                                       
        legend.append('text')                                     
          .attr('x', legendRectSize + legendSpacing)              
          .attr('y', legendRectSize - legendSpacing)              
          .text(function (d, i) {
      return data[i].label;
});     
    path.exit().remove(); 
d3.select('#opts')  
  .on('change', function(d) {
    var server = eval(d3.select(this).property('value'));
    dataset.middle = server;
    updateLegend(dataset);
});

});
}

     updateLegend(dataset);

Answer 1

In the current version, you just add declarations for the enter selection, which affects only arcs that are inserted . You need to guide D3 how to treat the update selection, which affects arcs that are updated and the exit selection, which affects arcs that are removed . You can add these lines of code before the path.enter() statement.

path.attr("d", function(d, i, j) {
  return arc.innerRadius(10 + r * j).outerRadius(r * (j + 1))(d);
});

path.exit().remove();

The updated fiddle: http://jsfiddle.net/36q95k1c/5/

Answer 2

To add to Hieu Le's nice answer, for your query about animations, it can be a bit tricky to figure out the right point at which to add the transition() call. Try putting it on line 100 of Hieu Le's jsfiddle to see if it's what you're after:

path.transition().attr("d", function(d, i, j) {
  return arc.innerRadius(10 + r * j).outerRadius(r * (j + 1))(d);
});

Once you've got it animating, check out the docs for information on different interpolations and tweens.

Cheers!