Question

我在d3.js中遇到了可视化问题。

我有三组包含几乎相同的可视化，是一种“多个小”可视化。可视化包含时间线，在更改时必须添加/移除适当的数据点。这是进行更新的代码：

var channels = { bt: { x: 0, y: -100 }, sms: { x: -300, y: 200 }, call: { x: 300, y: 200 } };
        //Draw web for each channel
        for (channel in channels) {
            this.circles[channel] = this.web[channel].selectAll("circle")
                   .data(this.displayedNodes, function (d) {
                       return d.id;
                   });

            this.circles[channel].exit().transition().duration(500).attr("r", 0).remove();

            this.circles[channel].enter()
                   .append("circle")
                   .attr("class", "person")
                   .attr("r", 0)
                   .attr("cx", function (d) {
                       return d.friendScales[channel](chart.minScores[channel]).x;
                   })
                   .attr("cy", function (d) {
                       return d.friendScales[channel](chart.minScores[channel]).y;
                   })
                   .attr("fill", function (d) {
                       //return chart.clusterColors[d.cluster];
                       return chart.colors[channel];
                   })
                   .attr("stroke-width", 2)
                   .attr("stroke", function (d) {
                       return d3.rgb(chart.colors[channel]).darker();
                   })
                   .attr("id", function (d) {
                       return "bubble_" + d.id;
                   })
                   .on("mouseover", function (d, i) {
                       return chart.show_details(d, i, this);
                   })
                   .on("mouseout", function (d, i) {
                       return chart.hide_details(d, i, this);
                   });
        }

.exit（）。transition（）。remove（）部分什么都不做，圆圈就滑开了，因为它们的数据值现在为0.但是如果我打开Chrome控制台并手动键入完全相同的东西评估，它工作正常。我认为这与JavaScript的异步模型有关，我不是JS wiz，所以我在这里有点不知所措，这在其他任何语言都应该没问题......

非常感谢任何想法！

要从评论中添加，因为它们变得越来越大：

工作示例：http://www.student.dtu.dk/~s103826/ 代码：https://github.com/haljin/d3-webchart/blob/master/Sensible/js/WebChart.js

要查看问题：将时间轴上的灰色矩形拖动（通过拖动边缘调整大小）到最后没有数据的区域 - 圆圈应按照exit().transition().remove()消失但不会消失。但是，如果我在该区域设置了一个断点并在Chrome控制台中输入相同的断点，那么就可以。

Answer 1

感谢Lars的帮助，我重新选择了所有圈子，而不是使用现有的更新选择this.circles：）

我现在感到很傻。

d3.js transition（）。remove（）不工作

1 个答案: