javascript - d3.js 带标签的动态数据

Question

我已成功实现以下工作(饼图根据 slider 值动态变化):

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