svg capa de elemento / superposición / overlay / superposición

Con miras a que ellos pueden conectar en caliente /draggable /escalable, he estado jugando con Mike Bostock del d3 tres pequeños círculos ejemplos.

Mientras se hace esto, me topé con un problema (usando Firefox 16.0.2, por cierto, – normalmente bien para svg) que, aunque en sí mismo no es grave, de alguna manera me molesta: es decir, que a pesar de que siempre está presente en el código HTML resultante, cualquier intento de la superposición de rectangular área de visualización con el botón elemento falla.

He intentado siguiendo cada uno de los consejos al pie de este de cambio, pero estos no han tenido ningún impacto.

Aquí mi código de base, mediante el cual el botón se muestra fuera del círculo que contiene svg área de la vista. Las agrupaciones son parte de los preparativos para los experimentos con arrastrar y soltar /escalabilidad:

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

Anexa a cualquier de raíz, g0, o g01 g02, el botón se muestra fuera del contenedor rectangular. Todo bien y bueno. Aquí, por ejemplo, el código html resultante de el código mostrado arriba:

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

Independientemente de anexar elemento que se utiliza, sin embargo, si el uso de

• z-index
• x & y las coordenadas
• dx & dy coordenadas
• con o sin id
• con o sin clase
• con o sin posicionamiento

..el botón, aunque presente en el código html resultante, continúa a ser mostrado en el exterior del envase, o simplemente no se muestra.

No parece ser un problema con svg superponer con la que no estoy muy familiarizado. Cualquier sugerencias?

Gracias
Thug