D3 Donut-Diagramm: Wie kann man zwischen zwei Objekt-Datasets wechseln?

Question

Ich baue ein D3-Donut-Diagramm, das auf der Grundlage von Funkeingaben zwischen zwei Datensätzen oszillieren sollte. Ich versuche, this example zu ändern.

Meine Datensätze sind relativ einfach:

var dataTotal = [ 
    {key: "BURGLARY", values: 2054}, 
    {key: "MOTOR VEHICLE THEFT", values: 1891}, 
    {key: "THEFT/LARCENY", values: 8849}, 
    {key: "VANDALISM", values: 242}, 
    {key: "VEHICLE BREAK-IN/THEFT", values: 5128} 
]; 
var dataDistrict = [ 
    {key: "BURGLARY", values: 221}, 
    {key: "MOTOR VEHICLE THEFT", values: 135}, 
    {key: "THEFT/LARCENY", values: 2485}, 
    {key: "VANDALISM", values: 31}, 
    {key: "VEHICLE BREAK-IN/THEFT", values: 581} 
]; 

Das Problem in benötigt werden verwurzelt scheint das Beispiel zu ändern, mit d3.tsv zu vermeiden. Bei meiner Implementierung wird ein Donut-Diagramm angezeigt, aber ich kann nicht zwischen den Datasets wechseln.

var width = 960, 
    height = 500, 
    radius = Math.min(width, height)/2; 

var color = d3.scale.category20(); 

var pie = d3.layout.pie() 
    .value(function(d) { return d.values; }) 
    .sort(null); 
// console.log(pie); 

var arc = d3.svg.arc() 
    .innerRadius(radius - 100) 
    .outerRadius(radius - 20); 

var donutChart = d3.select(".donutChart") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

var path = donutChart.datum(dataTotal).selectAll("path") 
    .data(pie) 
    .enter().append("path") 
    .attr("fill", function(d, i) { return color(i); }) 
    .attr("d", arc) 
    .each(function(d) { this._current = d; }); // store the initial angles 

d3.selectAll("input") 
    .on("change", change); 

var timeout = setTimeout(function() { 
    d3.select("input[value=\"dataDistrict\"]").property("checked", true).each(change); 
}, 2000); 

function change() { 
    var value = this.value; 
    clearTimeout(timeout); 
    pie.value(function(d) { 
    return d[value]; 
    }); // change the value function 
    path = path.data(pie); // compute the new angles 
    path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs 
} 

// Store the displayed angles in _current. 
// Then, interpolate from _current to the new angles. 
// During the transition, _current is updated in-place by d3.interpolate. 
function arcTween(a) { 
    var i = d3.interpolate(this._current, a); 
    this._current = i(0); 
    return function(t) { 
    return arc(i(t)); 
    }; 
} 

Meine Vermutung ist, dass die Datenstruktur Unterschiede zwischen meinen beiden Arrays und dem Beispiel TSV das Problem verursachen, aber egal, wie ich meine Daten ändern, wird nichts funktioniert:/

Answer 1

Definieren Sie Ihre Daten-Set-Array wie unten:

var dataTotal = [{ 
    key: "BURGLARY", 
    values: 2054 
    }, { 
    key: "MOTOR VEHICLE THEFT", 
    values: 1891 
    }, { 
    key: "THEFT/LARCENY", 
    values: 8849 
    }, { 
    key: "VANDALISM", 
    values: 242 
    }, { 
    key: "VEHICLE BREAK-IN/THEFT", 
    values: 5128 
    }]; 
    var dataDistrict = [{ 
    key: "BURGLARY", 
    values: 221 
    }, { 
    key: "MOTOR VEHICLE THEFT", 
    values: 135 
    }, { 
    key: "THEFT/LARCENY", 
    values: 2485 
    }, { 
    key: "VANDALISM", 
    values: 31 
    }, { 
    key: "VEHICLE BREAK-IN/THEFT", 
    values: 581 
    }]; 

den Wert des Kreislayouts als Werte definieren (weil Ihr Datenwert in Werten werden gezeigt hat Attribut).

var pie = d3.layout.pie() 
    .value(function(d) { 
     return d.values; 
    }) 
    .sort(null); 

Zunächst laden die dataTotal:

var path = svg.datum(dataTotal).selectAll("path") 
    .data(pie) 
    .enter().append("path") 
    .attr("fill", function(d, i) { 
     return color(i); 
    }) 
    .attr("d", arc) 
    .each(function(d) { 
     this._current = d; 
    }); // store the initial angles 

schließlich auf Änderung des Radio-Button lädt die entsprechenden Daten in die Torte wie unten dargestellt:

function change() { 
    var data = []; 
    if (this.value == "dataDistrict") { 
     data = dataDistrict; 
    } else { 
     data = dataTotal; 
    } 
    svg.datum(data).selectAll("path") 
     .data(pie); 
    path = path.data(pie); // compute the new angles 
    path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs 
    } 

Arbeits Code here