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

Question

我注意到 d3.zoom 功能有一个奇怪的行为，并且无法找出代码中的问题所在。我有一个 SVG，它的 z 索引:900我有一个 rootNode 它的 z-index: 100我周围的节点的 z-index: 1000

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

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

我做了一个 fiddle 来显示这个问题: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 索引。

但是，您可以轻松设置 <div> 的 z 索引SVG 位于:

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);

这是您更新的 fiddle :https://jsfiddle.net/vafc312a/