d3.js與標籤

Question

我已經成功地得到以下工作（餅圖根據滑塊值動態變化）動態數據：

var x = function() { 
     return $("#slider").val(); 
    } 

    var data = function() { 
     return [x(), ((100-x())/2), ((100-x())/2)]; 
    } 

    var w = 100, 
     h = 100, 
     r = 50, 
     color = d3.scale.category20(), 
     pie = d3.layout.pie().sort(null), 
     arc = d3.svg.arc().outerRadius(r); 

    var svg = d3.select("#chart").append("svg:svg") 
     .attr("width", w) 
     .attr("height", h) 
     .append("svg:g") 
     .attr("transform", "translate(" + w/2 + "," + h/2 + ")"); 

    var arcs = svg.selectAll("path") 
     .data(pie(data())) 
     .enter().append("svg:path") 
     .attr("fill", function(d, i) { return color(i); }) 
     .attr("d", arc) 
     .each(function(d) { this._current = d; }); 

    var redraw = function() { 
     newdata = data(); // swap the data 
     arcs = arcs.data(pie(newdata)); // recompute the angles and rebind the data 
     arcs.transition().duration(750).attrTween("d", arcTween); // redraw the arcs 
    }; 

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

我似乎無法對其進行修改，包括動態標籤（使用數據對象而不是數組{'label'：'label1'，'value'：value}。我如何修改上面的代碼來添加標籤？

Answer 1

這應該工作，保持標籤和餅圖作爲單獨的實體：

var x = function() { 
     return $("#slider").val(); 
    } 

    var data = function() { 
     return [x(), ((100-x())/2), ((100-x())/2)]; 
    } 

    var labels = function() { 
     var label1 = "LABEL 1: " + x(); 
     var label2 = "LABEL 2: " + ((100-x())/2); 
     var label3 = "LABEL 3: " + ((100-x())/2); 
     return [label1, label2, label3]; 
    } 

    var w = 200, 
     h = 100, 
     r = 50, 
     color = d3.scale.category20(), 
     pie = d3.layout.pie().sort(null), 
     arc = d3.svg.arc().outerRadius(r); 

    var svg = d3.select("#chart").append("svg:svg") 
     .attr("width", w) 
     .attr("height", h) 
     .append("svg:g") 
     .attr("transform", "translate(" + 50 + "," + h/2 + ")"); 

    var arcs = svg.selectAll("path") 
     .data(pie(data())) 
     .enter().append("svg:path") 
     .attr("fill", function(d, i) { return color(i); }) 
     .attr("d", arc) 
     .each(function(d) { this._current = d; }); 

    var label_group = svg.selectAll("text") 
     .data(labels()) 
     .enter() 
     .append("text") 
     .text(function(d) { 
      return d; 
     }) 
     .attr("x", 60) 
     .attr("y", function(d, i) { return (i * 20) - 16; }); 

    var redraw = function() { 
     newdata = data(); // swap the data 
     arcs = arcs.data(pie(newdata)); // recompute the angles and rebind the data 
     arcs.transition().duration(750).attrTween("d", arcTween); // redraw the arcs 
     label_group = label_group.data(labels()); 
     label_group.transition().delay(300).text(function(d) { 
      return d; 
     });