为了使它们可热插拔/可拖动/可缩放，我一直在玩 Mike Bostock 的 d3三个小圆圈示例。
在执行此操作时，我偶然发现了一个问题（使用 Firefox 16.0.2，顺便说一句 - 通常适用于 svg），虽然它本身并不严重，但不知何故困扰了我：即虽然总是出现在生成的 HTML 中，但任何试图覆盖带有按钮元素的矩形查看区域失败。
我已经尝试遵循本次交流中的每条建议，但这些都没有影响。
这是我的基本代码，其中按钮显示在包含 svg 视图区域的圆圈之外。分组是拖放/可扩展性实验准备工作的一部分：
var root = d3.selectAll("g#tool-2");
var g0 = root
.append("g")
.attr("class", "g0")
.attr("id", function (d, i) { return d.tool});
var g01 = g0
.append("g")
.attr("class", "g01")
.attr("id", function (d, i) { return d.tool});
var g02 = g0
.insert("g")
.attr("class", "g02")
.attr("id", function (d, i) { return d.tool});
var svg = g01
.insert("svg")
.attr("width", width)
.attr("height", height);
var button = g02
.append("div")
.attr("class", "button")
.attr("id", function (d, i) { return d.tool})
.append("button")
.text(function(d) { return "Run" });
svg.selectAll(".little")
.data(data)
.enter()
.append("circle")
.attr("class", "little")
.attr("cx", x)
.attr("cy", y)
.attr("r", 12);
console.log("Got past circle creation");
button
.on("click", function() {
svg.selectAll(".select").remove();
svg.selectAll(".select")
.data(data)
.enter()
.append("circle")
.attr("class", "select")
.attr("cx", x)
.attr("cy", y)
.attr("r", 60)
.style("fill", "none")
.style("stroke", "red")
.style("stroke-opacity", 1e-6)
.style("stroke-width", 3)
.transition()
.duration(750)
.attr("r", 12)
.style("stroke-opacity", 1);
});
附加到根、g0、g01 或 g02 中的任何一个，按钮显示在矩形容器的外部。一切都很好。例如，上面显示的代码生成的 html：
<g id="tool-2" class="g0">
<g id="tool-2" class="g01">
<svg height="180" width="360">
<circle r="12" cy="45" cx="180" class="little"></circle>
<circle r="12" cy="90" cx="60" class="little"></circle>
<circle r="12" cy="135" cx="300" class="little"></circle>
<circle style="fill: none; stroke: red; stroke-opacity: 1; stroke-width: 3;" r="12" cy="45" cx="180" class="select"></circle>
<circle style="fill: none; stroke: red; stroke-opacity: 1; stroke-width: 3;" r="12" cy="90" cx="60" class="select"></circle>
<circle style="fill: none; stroke: red; stroke-opacity: 1; stroke-width: 3;" r="12" cy="135" cx="300" class="select"></circle>
</svg>
</g>
<g id="tool-2" class="g02">
<div id="tool-2" class="button">
<button>Run</button>
</div>
</g>
</g>
然而，无论使用什么附加元素，是否使用
- z-index
- x & y 坐标
- dx & dy 坐标
- 有或没有身份证
- 有或没有类
- 有或没有定位
..该按钮虽然存在于生成的 html 中，但要么继续显示在容器外，要么根本不显示。
svg 覆盖似乎存在我真的不熟悉的问题。有什么提示吗？
谢谢暴徒