如何更改 DC.JS 图的 canvas 元素的 z-index？

Question

我在 DC.JS 中使用 canvas 元素，每当我渲染背景颜色（或任何其他与此相关的颜色）时，canvas 就会消失。

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

关于如何解决这个问题有什么建议吗？

这里有一个 working Stackblitz 来说明这个问题

P.S.

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

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

Answer 1

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

Answer 2

貌似在实现canvas散点图的时候，作者遇到了麻烦，因为在svg元素之后添加了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 问题，因为它与 canvas 和 svg HTML 图表 div 内的元素，不是任何 SVG 元素。

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

How do I change the z-index of a canvas element for DC.JS plot?