Question

我正在使用有关音乐聆听习惯的实时数据在last.fm's API上构建一个环形图表。我希望用户能够输入他们的用户名，以及他们希望看到的最受欢迎的艺术家的数量。然后，他们可以输入另一个用户名或其他数量的艺术家，并且图表会使用新提取的数据重新绘制。

但是，现在，当我提取少于数据点的数据时，我看到了这一点（例如，我要求用户X的前50位艺术家，然后来自用户X的前3位艺术家，环形图最终会以间隙重新制作，如下所示：

enter image description here

然后：

enter image description here

从较小的数据集移动到较大的数据集（例如，5位艺术家到50位艺术家）并没有产生这个问题。这是我的转换代码：

            var pie = d3.layout.pie()
                .sort(null)
                .value(function(d) { 
                    var sum = 0;
                    for (i=0 ; i<d.values.length ; i++) {
                        sum += d.values[i].playcount;
                    }
                    return sum;
                });

            var path = svg.selectAll("path")
                .data(pie(dataset));

            path.exit().remove();

            path.enter()
                .append("path")
                .attr("fill", function(d, i) { return color(i); })
                .style("stroke-width", "1px")
                .style("stroke", "white")
                .attr("d", arc);

我确信它与退出/更新/输入订单有关。但是，当我检查DOM中的每个元素时，数据似乎正在更新并将其自身附加到正确的元素。我不明白为什么它没有填满一个新的完整的360度环形图表。 Full JSFiddle here.

Answer 1

这是一个简单的修复，最后，经过一段时间冥想Thinking with Joins后到达：

之前（给出间隙齿环图）：

            var path = svg.selectAll("path")
                .data(pie(dataset));

            path.exit().remove();

            path.enter()
                .append("path")
                .style("stroke-width", "1px")
                .style("stroke", "white")
                .attr("fill", function(d, i) { return color(i); })
                .attr("d", arc);

之后（无间隙）：

            var path = svg.selectAll("path")
                .data(pie(dataset));

            path.exit().remove();

            path.enter()
                .append("path")
                .style("stroke-width", "1px")
                .style("stroke", "white");

            path.attr("fill", function(d, i) { return color(i); })
                .attr("d", arc);

现在很神秘：为什么我们在处理path.元素时需要重新启动d？

Answer 2

首次加载包含10个项目的数据时，D3JS会将这些项目的数据绑定到新的10个路径。在下一次，您加载包含3个项目的新数据，默认情况下不使用键功能，前3个项目已更新，因为存在3个路径，其d属性具有旧值 ;删除了7个先前的路径。您应该添加关键功能或更新d属性，如下所示：

        var path = svg.selectAll("path")
            .data(pie(dataset));

        path.attr("d", arc); // only need to add one line here, other lines aren't changed.

        path.exit().remove();

        path.enter()
            .append("path")
            .style("stroke-width", "1px")
            .style("stroke", "white")
            .attr("fill", function(d, i) { return color(i); })
            .attr("d", arc);

Answer 3

嘿，它可能已经很长一段时间了，但我发现无论你不与enter（）和append（）分开，都不会更新。因此，如果您更改笔划宽度或笔触颜色，则需要将其移动到第二条路径。为了让他们得到更新。目前，您只更新圆弧和填充颜色。

我遇到了这个问题而且我的头发已经撕掉了，谢谢你的帮助！

d3js：即使在.exit（）之后元素也会延迟.remove（）

3 个答案: