Question

I’ve managed to get the following working (pie chart changing dynamically based on a slider value):

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

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?

Answer 1

This should work, keeping the labels and the pie chart as separate entities:

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