數據輸入/輸出處理程序

Question

d3.js中的輸入/輸出處理程序如何引發？我發佈了一個fiddle here並已將代碼複製到此處。爲了清晰起見，我還發布了一些圖片。

當data = [13, 15, 21, 42, 5, 18]

過渡到data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

如何它實際上應該是

var data1 = [13, 15, 21, 42, 5, 18], 
    data2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
    data = data1, 
    format = function() { 
     var text = arguments[0], 
      args = Array.prototype.slice.call(arguments, 1); 
     return text.replace(/{(\d+)}/g, function(match, number) { 
      return typeof args[number] != 'undefined' ? args[number]: match; 
     }); 
    }; 

var width = 400, 
    height = 400, 
    outerRadius = Math.min(width, height)/2, 
    innerRadius = outerRadius * .6, 
    color = d3.scale.category20(), 
    donut = d3.layout.pie(), 
    arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius); 

//Get default settings for a donut chart 
var vis, arcs; 

vis = d3.select("body") 
    .append("svg").attr("width", width) 
    .attr("height", height) 
    .attr('class', 'pie'); 

arcs = vis.selectAll('path').data(donut(data)); 

arcs.enter() 
    .append('svg:path') 
    .attr('transform', format("translate({0}, {0})", outerRadius)) 
    .attr('fill', function(d, i) { return color(i); }) 
    .attr('d', arc) 
    .each(function(d) { this._previous = d; }) 
    .on('click', function(d, i) { 
     data = data === data1 ? data2: data1; 
     arcs.data(donut(data)) 
     .transition() 
      .duration(750) 
      .attrTween('d', function(a) { 
       var i = d3.interpolate(this._previous, a); 
       this._previous = i(0); 
       return function(t) { 
        return arc(i(t)); 
       }; 
      }); 
    }); 

arcs.exit().remove(); 

Answer 1

嗯，我似乎已經部分地解決它自己。我發佈了一個fiddle here並將代碼複製到此處。

var data1 = [13, 15, 21, 42, 5, 18], 
    data2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
    data = data1, set = 1, 
    format = function() { 
     var text = arguments[0], 
      args = Array.prototype.slice.call(arguments, 1); 
     return text.replace(/{(\d+)}/g, function(match, number) { 
      return typeof args[number] != 'undefined' ? args[number] : match; 
     }); 
    }; 

var width = 400, 
    height = 400, 
    outerRadius = Math.min(width, height)/2, 
    innerRadius = outerRadius * .6, 
    color = d3.scale.category20(), 
    donut = d3.layout.pie(), 
    arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius); 

var vis, arcs; 

vis = d3.select("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .attr('class', 'pie'); 

function update(){ 
    data = data === data1 ? data2: data1; 
    arcs = vis.selectAll('path') 
     .data(donut(data)); 

    arcs.enter() 
     .append('svg:path') 
     .attr('transform', format("translate({0}, {0})", outerRadius)) 
     .attr('fill', function(d, i) { return color(i); }) 
     .attr('d', arc).each(function(d) { this._previous = d; }); 

    arcs 
     .transition() 
      .duration(750) 
      .attrTween('d', function(a) { 
       var i = d3.interpolate(this._previous, a); 
       this._previous = i(0); 
       return function(t) { 
        return arc(i(t)); 
       }; 
      }); 

    arcs.exit().remove(); 
} 

update(); 
d3.select(window).on('click', function(){ 
    update(); 
});