D3 v4中的方格出口选择

伯纳德·L

我一直在有限地接触d3js的情况下努力将此块更改为v4。

所做的更改是；

"https://d3js.org/d3.v3.js" 至 "https://d3js.org/d3.v4.js"
.ease('linear') 至 .ease(d3.easeLinear)

我从这里的更改自述文件中进一步了解了这一点。

更改导致图表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函数的变化引起的。我无法查看出错时的内容，因为运行此命令时控制台内似乎没有错误。

杰拉尔多·富塔多

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

根据Bostock的说法：

D3 2.0进行了更改：添加到enter选择中现在将把输入元素复制到更新选择中。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)));
    };
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。