それらをホットプラグ可能/ドラッグ可能/スケーラブルにするために、Mike Bostock の d3 の3 つの小さな円の例をいじってみました。
これを行っているときに、問題に遭遇しました (Firefox 16.0.2 を使用、btw - 通常は svg では問題ありません)。それ自体は深刻ではありませんが、どういうわけかバグがあります。ボタン要素のある長方形の表示領域は失敗します。
このやり取りの最後にある各アドバイスに従ってみましたが、効果はありませんでした。
これが私の基本コードです。これにより、ボタンは円を含む 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>
ただし、append 要素を使用するかどうかに関係なく、
- Z インデックス
- x & y 座標
- dx & dy 座標
- IDあり/なし
- クラスの有無にかかわらず
- ポジショニングの有無にかかわらず
..ボタンは、結果の htmlに存在しますが、コンテナの外に表示され続けるか、単に表示されません。
私がよく知らないsvgオーバーレイに問題があるようです。ヒントはありますか？
ありがとう