如何更改 DC.JS 绘图的画布元素的 z-index？答案

【问题标题】：How do I change the z-index of a canvas element for DC.JS plot?如何更改 DC.JS 绘图的画布元素的 z-index？
【发布时间】：2021-03-02 09:35:56
【问题描述】：

我在 DC.JS 中使用了一个画布元素，每当我渲染背景颜色（或其他任何颜色）时，画布都会消失。

这似乎是由于相应的 D3 元素中的 z-index rendering。

关于如何解决这个问题的任何建议？

这里有一个working Stackblitz 来显示问题

附言

我尝试添加以下内容无济于事

eventScatterChart.select('canvas').style('z-index', 2000);

【问题讨论】：

我不明白你想要什么。您有一个绘制轴的 svg 元素，以及作为散点图的 canvas 元素。如果要添加背景颜色可以尝试在canvas 元素之前添加rect svg 元素。 z-index 在 svg 中不起作用，顺序是您绘制元素的顺序
正是@vila 所说的。您可以使用d3.selection.raise() 和.lower() 更改绘制的SVG 元素的顺序。

【解决方案1】：

貌似在实现canvas散点图的时候，作者遇到了麻烦，因为canvas元素加在svg元素之后，默认按z顺序向前——但是svg元素需要在前面为了刷牙工作。

然后维护者（我）在审查合并补丁时没有发现这一点，并且没有提出更好的机制来实现目标，因为它似乎有效。

你在正确的轨道上

eventScatterChart.select('canvas').style('z-index', 2000);

只是这需要在每次渲染和重绘之后运行，并且您还必须考虑到 svg 层才能使画笔工作：

  eventScatterChart.on('pretransition', chart => {
    chart.select('svg').style('z-index', 1);
    chart.select('canvas').style('z-index', 0)
  })

顺便说一句，人们谈论 SVG z-index 是完全正确的，但这不是 SVG 问题，因为它与图表 div 中的 canvas 和 svg HTML 元素 有关，而不是任何 SVG 元素。

我提交了一个问题here。感谢您提出这个问题！

【讨论】：

【解决方案2】：

如果要给散点图添加背景色，可以尝试在canvas元素前添加rectsvg元素。

【讨论】：

很抱歉投了反对票，但很明显@joshp 正在寻求一种设置 z 索引的方法，而对 CSS 属性的引用只是在黑暗中刺伤。如果您使用您在评论中提供的有用信息编辑您的问题，将会删除。 :)