D3 v4中的方格出口选择

时间:2019-03-18 06:46:26

标签: javascript d3.js

我一直在尝试将this块更改为v4,但仅限于接触d3js。

所做的更改是;

  • "https://d3js.org/d3.v3.js""https://d3js.org/d3.v4.js"

  • .ease('linear').ease(d3.easeLinear)

我从更改自述文件here中进一步了解。

当我尝试使用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函数的变化引起的。我无法看到出现错误的原因,因为运行此命令时控制台内似乎没有错误。

1 个答案:

答案 0 :(得分:2)

这里的问题似乎是臭名昭著的魔术行为,它是D3版本2中的Mike Bostock(D3创建者)引入的,后来又在D3 v4中删除了。

根据Bostock

  

D3 2.0进行了一项更改:现在,将enter元素复制到更新选择中,然后将enter元素复制到更新选择中。D3 4.0消除了enter.append的魔力。 (实际上,D3 4.0完全消除了回车选择和普通选择的区别:现在只有一类选择。)

您可以在以下答案中进一步了解此问题:https://stackoverflow.com/a/47032222/5768908https://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)));
    };
});