Aktualisieren Kreisdiagramm mit Etiketten (d3)

Question

Ich versuche nur, die Etiketten von mobostocks Kreisdiagramm Beispiel anzufügen, aber aus irgendeinem Grund kann ich es nicht zum Funktionieren bringen.

Ich versuche im Wesentlichen nur zwei seiner Beispiele zu kombinieren (pie update, pie labels), also versuche ich diesen Code zu implementieren;

var g = svg.selectAll(".arc") 
     .data(pie(data)) 
    .enter().append("g") 
     .attr("class", "arc"); 

    g.append("path") 
     .attr("d", arc) 
     .style("fill", function(d) { return color(d.data.apples); }); 

    g.append("text") 
     .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.data.apples; }); 
}); 

in diese Variable in seinem Kreisdiagramm Update Beispiel;

var path = svg.datum(data).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 

Hier ist der Plnk meines Versuches, hoffentlich kann jemand das Problem klären, das ich habe.

http://plnkr.co/edit/e05kKjB8KWGqRteh8OdS?p=preview

---

-Code für meinen Versuch;

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.apples; }) 
    .sort(null); 

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

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

d3.tsv("data.tsv", type, function(error, data) { 
    if (error) throw error; 

/* var path = svg.datum(data).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*/ 


    var g = svg.datum(data).selectAll(".arc") 
     .data(pie) 
    .enter().append("g") 
     .attr("class", "arc") 

    g.append("path") 
     .attr("d", arc) 
     .style("fill", function(d) { return color(d.data.apples); }) 
      .each(function(d) { this._current = d; }); // store the initial angles 


    g.append("text") 
     .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.data.apples; }); 

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

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

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

function type(d) { 
    d.apples = +d.apples; 
    d.oranges = +d.oranges; 
    return d; 
} 

// 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)); 
    }; 
} 

Answer 1

Wenn Sie aus einer Sammlung bewegt von path zu einer Sammlung von g ein path und text enthält, Sie Übergang nicht aktualisiert auf den Wegen zu betreiben. Es versucht, den Übergang auf die g anzuwenden. Korrigierte Code:

function change() { 
    var value = this.value; 
    pie.value(function(d) { return d[value]; }); 
    g = g.data(pie); 
    g.select("path") //<-- operate on the paths in the g 
    .transition() 
    .duration(750) 
    .attrTween("d", arcTween); 
} 

Laufcode:

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

 
var color = d3.scale.category20(); 
 

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

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

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

 
var data = [{ 
 
    "apples": 53245, 
 
    "oranges": 200 
 
}, { 
 
    "apples": 28479, 
 
    "oranges": 200 
 
}, { 
 
    "apples": 19697, 
 
    "oranges": 200 
 
}, { 
 
    "apples": 24037, 
 
    "oranges": 200 
 
}, { 
 
    "apples": 40245, 
 
    "oranges": 200 
 
}]; 
 

 
var g = svg.datum(data).selectAll(".arc") 
 
    .data(pie) 
 
    .enter().append("g") 
 
    .attr("class", "arc"); 
 

 
var path = g.append("path") 
 
    .attr("d", arc) 
 
    .style("fill", function(d) { 
 
    return color(d.data.apples); 
 
    }) 
 
    .each(function(d) { 
 
    this._current = d; 
 
    }); // store the initial angles 
 

 
var text = g.append("text") 
 
    .attr("transform", function(d) { 
 
    return "translate(" + arc.centroid(d) + ")"; 
 
    }) 
 
    .attr("dy", ".35em") 
 
    .text(function(d) { 
 
    return d.data.apples; 
 
    }); 
 

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

 
function change() { 
 
    var value = this.value; 
 
    pie.value(function(d) { 
 
    return d[value]; 
 
    }); // change the value function 
 
    g = g.data(pie); // compute the new angles 
 
    g.select("path") 
 
    .transition() 
 
    .duration(750) 
 
    .attrTween("d", arcTween); // redraw the arcs 
 
    g.select("text") 
 
    .style("opacity", 0) 
 
    .attr("transform", function(d) { 
 
     return "translate(" + arc.centroid(d) + ")"; 
 
    }) 
 
    .text(function(d) { 
 
     return d.data[value]; 
 
    }) 
 
    .transition() 
 
    .duration(1000) 
 
    .style("opacity", 1); 
 
} 
 

 
function type(d) { 
 
    d.apples = +d.apples; 
 
    d.oranges = +d.oranges; 
 
    return d; 
 
} 
 

 
// 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)); 
 
    }; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <script data-require="d3@*" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    </head> 
 

 
    <body> 
 
    <form> 
 
    <label><input type="radio" name="dataset" value="apples" checked> Apples</label> 
 
    <label><input type="radio" name="dataset" value="oranges"> Oranges</label> 
 
</form> 
 
    <script src="script.js"></script> 
 

 
    </body> 
 

 
</html>