Javascript 在单个链中更新、输入和退出选择

我用D3来创建反应性可视化。每当数据发生变化时，我发现自己经常使用这种模式：

function redraw(myData) {
    // if data points decreased, remove some rectangles
    d3.selectAll('rect')
        .data(myData)
        .exit()
        .remove();
    // if data points increased, add some rectangles
    d3.selectAll('rect')
        .data(myData)
        .enter()
        .append('rect');
    // assign attribute values to all rectangles
    d3.selectAll('rect')
        .data(myData)
        .attr('width', (d) => d.width)
        .attr('height', (d) => d.height)
        .attr('fill', 'blue');
}

有没有办法将此操作缩短为一个较长的操作链

我见过很多像D3这样的例子，对于一次性绘图来说很好。我无法让它们重新绘制。

join（）方法 你问

是否有办法将此操作缩短为单个长链操作？（强调矿山）

是的，有：如果您使用的是D3 v5.8或更高版本，您可以利用新方法，通过

更新

、

输入

和

退出

选项创建一个单链。顺便说一句，您链接的示例（由D3创建者Bostock制作）已经使用了

join（）

，因此它不是您所说的“一次性绘制”

你的全部职能是：

function redraw(myData) {
    d3.select(foo).selectAll('rect')
        .data(myData)
        .join('rect')
        .attr('width', (d) => d.width)
        .attr('height', (d) => d.height)
        .attr('fill', 'blue');
};

下面是一个基本演示：

const svg=d3.选择（“svg”）；
d3.区间（函数（）{
重画（getData（））；
}, 1500);
重画（getData（））；
函数重画（myData）{
svg.selectAll（'rect'）
.数据（myData）
.join（'rect'））
.attr（'width'，（d）=>d.width）
.attr（'height'，（d）=>d.height）
.attr（'x'，（d）=>d.x）
.attr（'y'，（d）=>d.y）
.style（'填充'，'薰衣草'）
.style（'stroke'，'#444'）；
};
函数getData（）{
返回d3.range（~~（Math.random（）*20））.map（函数（d）{
返回{
x:Math.random（）*250，
y:Math.random（）*100，
宽度：10+Math.random（）*40，
身高：10+数学随机数（）*40，
}
});
}