Question

我是D3的新手，并且已经关注了一些饼图教程。

即Mike Bostock教程。 http://bl.ocks.org/mbostock/1346410

但我对甜甜圈图表从一个数据集更新到另一个数据集有疑问，第二个数据集的值比第一个更多。

我通过更新功能多次尝试但没有运气，我会保持简单并给出一个假设的例子，假设我的第一个数据集有5个值

[1,2,3,4,5]

我的第二个数据集有10个值

[1,2,3,4,5,6,7,8,9,10]

动态更新后，弧上仅显示5个新数据集的值。这就像馅饼被固定，只有5个圆弧部分能够显示新数据集的5个值。

任何帮助都会受到赞赏，因为它已经琢磨了一段时间的想法！

Answer 1

使其适用于不同大小的数据的关键是处理.enter()和.exit()选项。这个tutorial更详细，但简单地说，输入选择表示不存在DOM元素的数据（例如，在传入更多数据的情况下），更新选择（您已经处理的）表示数据对于哪些DOM元素以及不再存在数据的退出选择DOM元素（例如，当您有更多元素开始时）。

所以在你的change函数中，你需要做这样的事情。

function change() {
  clearTimeout(timeout);

  var path = svg.datum(data).selectAll("path")
    .data(pie);
  path.enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc)
    .each(function(d) { this._current = d; }); // add the new arcs
  path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
  path.exit().remove(); // remove old arcs
}

这假设您正在按照上面的建议更新data变量，而不是像示例中那样从现有数据结构中获取不同的值。

Answer 2

在这里，我点击了饼图上方的文字时触发了一个简单的更新：JsFiddle
发生的主要事情是.on("click")事件触发时所有数据都会更新，因此图表会更新如下：

d3.select("#update")
.on("click", function (d) {
    data = [1,2,3,4,5,6,7,8,9,10];
    vis.data([data]);
    arc = d3.svg.arc().outerRadius(r);
    pie = d3.layout.pie().value(function(d){return d; });
    arcs.data(pie)
        .enter()
        .append("svg:g")
        .attr("class", "slice")
        .append("svg:path")
        .attr("fill", function(d, i){return color(i);}).attr("d", arc);
});

使用具有更多值的新数据集更新饼图

2 个答案: