title: d3.js dynamic data with labels
body: <p>I've managed to get the following working (pie chart changing dynamically based on a slider value):</p>
  
  <pre><code>    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));
        };
      }
  </code></pre>
  
  <p>I can't seem to modify it to include dynamic labels (use an object for data rather than an array {'label': 'label1', 'value': value}. How would I modify the above code to add labels?</p>