如何避免 .lower() 重新洗牌 d3 中的元素？答案

【问题标题】：How to avoid .lower() to reshuffle elements in d3?如何避免 .lower() 重新洗牌 d3 中的元素？
【发布时间】：2021-08-16 02:18:44
【问题描述】：

我有以下 d3 代码，用于在图表的所有其他元素下方绘制底层：

const rectsEnter = vis.g.selectAll('rect.bottomLayer').data(data).enter()
const rectsUpdate = vis.g.selectAll('rect.bottomLayer').data(data)
vis.g.selectAll('rect.bottomLayer').data(data).exit().remove()

rectsEnter.append('rect')
            .attr('class', 'bottomLayer')
            .attr('fill', 'grey')
            .attr('x', x)
            .attr('y', (d, i) => i*size)
            .attr('width', 0)
            .attr('height', height)
            .lower()
            .transition()
            .attr('width', newWidth)

rectsUpdate
            .lower()
            .transition()
            .attr('x', x)
            .attr('y', (d, i) => i*size)
            .attr('width', width)
            .attr('height', height)
            .attr('fill', newColor)

问题在于 d3 在输入或更新图表的任何其他元素时重新排列这些矩形。似乎如果应用于数组（提供的数据包含或超过 1 个元素），d3 会获取顶部的所有元素并将它们放在底部。

如果数据数组包含许多元素，有什么办法可以避免这种重新洗牌？

PS。我正在尝试模仿 svg 元素的 z-index 属性。显然，svg 没有 z-index，因此必须做出一些牺牲才能实现所需的功能。

【问题讨论】：

标签： javascript svg d3.js

【解决方案1】：

代码示例似乎过于复杂。这是 D3 进入/退出模式的更正确用法（适用于 D3 V4 及更高版本）：

// Create selection and apply the data (each item of data should have a unique identifier)
const rects = vis.g.selectAll('rect.bottomLayer').data(data, d => d.id);

// Enter 
const entered = rects.enter().append('rect').classed('bottomLayer', true)...

// Merge new elements with already created and update ...
const updated = entered.merge(rects);
updated.transition()...

// Exit 
rects.exit().remove();

【讨论】：