Question

我注意到了d3.zoom功能的一个奇怪的行为，无法发现代码中的问题所在。我有一个SVG它有z-index：900 我有一个rootNode它有z-index：100 我有周围的节点有z-index：1000

因此SVG行位于rootNode的前面，周围的节点位于rootNode和SVG元素的前面。

这是真的，但只有在我平移或放大之后，因为所有的svg线都在前面，这对我来说没有意义。 z顺序没有改变，DOM也没有改变。

我做了一个小提示，显示了这个问题：https://jsfiddle.net/jxkgfdcm/

//create a svg in the body of index.html
var svg = container.append("svg")
  .classed("simulation", 1)
  .attr("width", width)
  .attr("height", height)
  .style("z-index", 900);

Answer 1

SVG没有z-index。

但是，您可以轻松设置SVG所在的<div>的z-index：

var svg = container.append("div")
    .style("z-index", 999)//z-index of the div
    .append("svg")//append the SVG to that div
    .classed("simulation", 1)
    .attr("width", width)
    .attr("height", height);

这是您更新的小提琴：https://jsfiddle.net/vafc312a/

d3.js v4 d3.zoom和缩放或平移后的奇怪元素顺序

1 个答案: