0

私は次のように機能することができました（円グラフはスライダーの値に基づいて動的に変化します）：

    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}ではなくデータのオブジェクトを使用します。上記のコードを変更してラベルを追加するにはどうすればよいですか？

4

1 に答える 1

2

これは、ラベルと円グラフを別々のエンティティとして保持して機能するはずです。

    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;
        });
于 2012-07-17T14:18:52.527 に答える