Question

这可能是使用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();
});

这个json结构的一个例子给予更新函数“data”：

[{"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"}]

Answer 1

您无需其他.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

D3js PieChart不会执行UPDATE部分

1 个答案: