时间戳

首页 > 解决方案 > D3 v4 中的方形网格出口选择

javascript - D3 v4 中的方形网格出口选择

问题描述

由于我对 d3js 的了解有限，我一直在努力将此块更改为 v4。

所做的更改是；

我从此处的更改自述文件中进一步了解。

cell.exit.transition()当我尝试退出函数时，这些更改导致图表无法到达块console.log，这也很明显，因为网格不会退出并且只是从新的随机数据中追加：

cell.exit().transition()
    .delay(function(d, i) { return (n0 - i) * updateDelay; console.log(n0, n1);})
    .duration(updateDuration)
    .attr("width", 0)
    .remove();

从自述文件来看，转换方法没有变化，但我认为这是由于 select 函数的变化。我无法看到什么时候出错，因为当我运行它时控制台内似乎没有错误。

标签： javascriptd3.js

解决方案

这里的问题似乎是由 Mike Bostock（D3 创建者）在 D3 v2 中引入的臭名昭著的魔术行为，后来在 D3 v4 中被删除。

根据博斯托克：

D3 2.0 引入了一个变化：追加到输入选择现在会将输入元素复制到更新选择中 [...] D3 4.0 消除了 enter.append 的魔力。（事实上​​，D3 4.0 完全消除了进入选择和普通选择之间的区别：现在只有一类选择。）

您可以在以下答案中阅读有关此问题的更多信息：https ://stackoverflow.com/a/47032222/5768908和https://stackoverflow.com/a/45093007/5768908

在您的情况下，解决方案是将更新选择更改为：

var cellUpdate = cell.selectAll("rect")
    .data(d3.range(n1));

接着：

cellUpdate.exit()
    //etc...

cellUpdate.enter()
    .append("rect")
    //etc...

这是更新的 bl.ocks：https ://bl.ocks.org/GerardoFurtado/b0d66087d9888a2cac3a42b114e5e8c4/72a0e54de5ce8cba2c398b282d953dd5c2bcc66e

PS：要使其在 v4/5（但不是从 v5.8 开始）中工作，您还必须更改文本补间：

.tween("text", function() {
    var self = this;
    var i = d3.interpolateNumber(n0, n1);
    return function(t) {
        self.textContent = formatNumber(Math.round(i(t)));
    };
});

推荐阅读