Обновление круговой диаграммы с метками (d3)

Question

Я просто пытаюсь добавить ярлыки примера круговой диаграммы mbostocks, но по какой-то причине я не могу заставить его работать.

Я по существу просто пытаюсь совместить два его примера (pie update, pie labels), поэтому я пытаюсь реализовать этот код;

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

в эту переменную в примере его круговой диаграммы;

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 

вот plnk моей попытки, надеюсь, кто-то может прояснить вопрос, который у меня есть.

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

---

код для моей попытки;

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

Когда вы переехали из коллекции path в коллекции g содержащей path и text, вы не обновляли свой переход на использование на путях. Он пытается применить переход на g. Исправленный код:

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

Running Код:

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>