当存在相邻元素时，D3 SVG缩放不起作用

Question

我正在使用包含其他div的div作为SVG(或下方(上方的覆盖。这将使我能够将富含HTML的功能放在SVG的顶部，例如滚动表，这与Google Maps叠加层不同。我目前只是使这个概念正常工作，关键的困难是让Divs留在他们绑定的SVG点上。

除非我删除或隐藏覆盖div。

我尝试过： - 将DIV移出" OuterDiv" - 不起作用，因为DIV没有接收数据(Enter函数似乎停止工作( - 在SVG和Overlay Div上设置Z索引 - 在覆盖div

之前移动SVG

无论我做什么变焦事件都不会开火，但是如果您在CSS中使用display:none或visibility:hidden隐藏DIV，它的工作正常

var
  outerwidth = 1000,
  outerheight = 500,
  width = outerwidth,
  height = outerheight,
  rectwidth = 200,
  rectheight = 50;
var div = d3.select(".outerdiv");
var overlay = div.select(".overlay");
var svg = div.select("svg")
  .attr("preserveAspectRatio", "xMidYMid")
  .attr("class", "svgnetwork");
var g = svg.append("g");
overlay.style("width", outerwidth + "px").style("height", outerheight + "px");
var data = [
  ["Test1", 15],
  ["Test2", 25],
  ["Test3", 10],
  ["Test4", 20]
];
var nodes = overlay.selectAll("div").data(data).enter().append("div").attr("class", "node")
  .style("top", function(d, i) {
    return i * 100 + "px";
  })
  .style("left", function(d, i) {
    return 0 + "px";
  })
  .style("width", rectwidth + "px")
  .style("height", rectheight + "px")
// inner text content of node
nodes
  .append("div").text(function(d, i) {
    return "Content : " + d[0] + " " + d[1];
  });
// rects which should appear in the same places as divs
g.selectAll("rect").data(data).enter().append("rect")
  .attr("class", "noderect")
  .attr("width", rectwidth)
  .attr("height", rectheight)
  .attr("y", function(d, i) {
    return i * 100;
  })
  .attr("x", 0);
// set svg viewbox
svg.attr("viewBox", "0 0 " + width + " " + height);
// uncomment the next line and zoom on svg works
// overlay.node().style.display = "none";
svg.call(d3.zoom()
  .scaleExtent([1 / 2, 2])
  .on("zoom", function() { // zoom fires on pan and zoom
    svg.attr("transform", d3.event.transform);
    return false;
  })
);

svg {
  background-color: #ffffee;
  z-index: 2;
}
.outerdiv {
  border: 1px solid black;
  margin: 5px;
  height: 500px;
  width: 1000px;
  position: relative;
  background-color: transparent;
}
.overlay {
  border: 1px solid blue;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.node {
  box-sizing: border-box;
  border: 1px solid green;
  height: 25px;
  width: 150px;
  position: absolute;
}
.noderect {
  fill: none;
  stroke: red;
  stroke-width: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.7/d3.min.js"></script>
<div class="outerdiv">
  <div class="overlay"></div>
  <svg></svg>
</div>

最终目标是将覆盖层中的divs带到我们放大和pan时使用SVG内容移动，但显然第一步是完全放大。

谢谢

编辑：最终解决方案，包括覆盖divs Zooming和Panning

https://jsfiddle.net/paull3876/z6ef2uwg/

认为这可能是一个普遍的要求，因此对某人有用：(

Answer 1

您可以将pointer-events:none;添加到覆盖div

.overlay {
  pointer-events:none;
}

然后，基础svg将接收鼠标事件

var
  outerwidth = 1000,
  outerheight = 500,
  width = outerwidth,
  height = outerheight,
  rectwidth = 200,
  rectheight = 50;
var div = d3.select(".outerdiv");
var overlay = div.select(".overlay");
var svg = div.select("svg")
  .attr("preserveAspectRatio", "xMidYMid")
  .attr("class", "svgnetwork");
var g = svg.append("g");
overlay.style("width", outerwidth + "px").style("height", outerheight + "px");
var data = [
  ["Test1", 15],
  ["Test2", 25],
  ["Test3", 10],
  ["Test4", 20]
];
var nodes = overlay.selectAll("div").data(data).enter().append("div").attr("class", "node")
  .style("top", function(d, i) {
    return i * 100 + "px";
  })
  .style("left", function(d, i) {
    return 0 + "px";
  })
  .style("width", rectwidth + "px")
  .style("height", rectheight + "px")
// inner text content of node
nodes
  .append("div").text(function(d, i) {
    return "Content : " + d[0] + " " + d[1];
  });
// rects which should appear in the same places as divs
g.selectAll("rect").data(data).enter().append("rect")
  .attr("class", "noderect")
  .attr("width", rectwidth)
  .attr("height", rectheight)
  .attr("y", function(d, i) {
    return i * 100;
  })
  .attr("x", 0);
// set svg viewbox
svg.attr("viewBox", "0 0 " + width + " " + height);
// uncomment the next line and zoom on svg works
// overlay.node().style.display = "none";
svg.call(d3.zoom()
  .scaleExtent([1 / 2, 2])
  .on("zoom", function() { // zoom fires on pan and zoom
    svg.attr("transform", d3.event.transform);
    overlay.raise()
    return false;
  })
);

svg {
  background-color: #ffffee;
  z-index: 2;
}
.outerdiv {
  border: 1px solid black;
  margin: 5px;
  height: 500px;
  width: 1000px;
  position: relative;
  background-color: transparent;
}
.overlay {
  border: 1px solid blue;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events:none;
}
.node {
  box-sizing: border-box;
  border: 1px solid green;
  height: 25px;
  width: 150px;
  position: absolute;
}
.noderect {
  fill: none;
  stroke: red;
  stroke-width: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.7/d3.min.js"></script>
<div class="outerdiv">
  <div class="overlay"></div>
  <svg></svg>
</div>

但是您需要将转换应用于覆盖