如何避免 .lower() 重新排列 d3 中的元素？

Question

我有以下 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，因此必须做出一些牺牲才能实现所需的功能。

Answer 1

代码示例似乎过于复杂。这是 D3 enter/exit 模式的更正确用法（适用于 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();

如何避免 .lower() 重新排列 d3 中的元素？

How to avoid .lower() to reshuffle elements in d3?

javascript

svg

d3.js