1

これはおそらく、d3js を使用して作成できる最も単純なグラフです。それでも私は苦労しています。

グラフは、enter() および exit() で指定されたすべてを実行します。しかし、ENTER + UPDATE のすべては完全に無視されます。なぜ？

// Setup dimensions
var width = 200,
    height = 200,
    radius = Math.min(width, height) / 2,

// Setup a color function with 20 colors to use in the graph
    color = d3.scale.category20(),

// Configure pie container
    arc = d3.svg.arc().outerRadius(radius - 10).innerRadius(0),   // Define the arc element
    svg = d3.select(".pie").append("svg:svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"),

// This is the layout manager for the pieGraph
    pie = d3.layout.pie()
        .sort(null)
        .value(function (d) {
            return d.answers;
        }),

// Allow two groups in the container. One overlapping the other, just to make sure that
// text labels never get hidden below pie arcs.
    graphGroup = svg.append("svg:g").attr("class", "graphGroup"),
    textGroup  = svg.append("svg:g").attr("class", "labelGroup");

// Data is loaded upon user interaction. On angular $scope update, refresh graph...
$scope.$watch('answers', function (data) {
    // ===  DATA ENTER ===================
    var g = graphGroup.selectAll("path.arc").data(pie(data)),
        gEnter = g.enter()
            .append("path")
            .attr("d", arc)
            .attr("class", "arc"),

        t = textGroup.selectAll("text.label").data(data),
        tEnter = t.enter()
            .append("text")
            .attr("class", "label")
            .attr("dy", ".35em")
            .style("text-anchor", "middle");

    // === ENTER + UPDATE ================
    g.select("path.arc")
        .attr("id", function (d) {
            return d.data.id + "_" + d.data.selection;
        })
        .attr("fill", function (d, i) {
            return color(i);
        })
        .transition().duration(750).attrTween("d", function (d) {
            var i = d3.interpolate(this._current, d);
            this._current = i(0);
            return function (t) {
                return arc(i(t));
            };
        });
    t.select("text.label")
        .attr("transform", function (d) {
            return "translate(" + arc.centroid(d) + ")";
        })
        .text(function (d) {
            return d.data.opt;
        });

    // === EXIT ==========================
    g.exit().remove();
    t.exit().remove();
});

update 関数に "data" として指定された json 構造の一例:

[{"selection":"0","opt":"1-2 timer","answers":"7"},
 {"selection":"1","opt":"3-4 timer","answers":"13"},
 {"selection":"2","opt":"5-6 timer","answers":"5"},
 {"selection":"3","opt":"7-8 timer","answers":"8"},
 {"selection":"4","opt":"9-10 timer","answers":"7"},
 {"selection":"5","opt":"11 timer eller mer","answers":"11"},
 {"selection":"255","opt":"Blank","answers":"8"}]
4

1 に答える 1

3

.select()更新の選択にアクセスするために、追加は必要ありません。実際、これはあなたのケースでは空の選択を返します。つまり、何も起こりません。.select()それを機能させるには、単に追加を取り除き、

g.attr("id", function (d) {
        return d.data.id + "_" + d.data.selection;
    })
// etc

t.attr("transform", function (d) {
        return "translate(" + arc.centroid(d) + ")";
    })
// etc
于 2013-10-15T19:45:25.370 に答える