3

この投稿で説明されているこの SVGの動作を再現しようとしていますが、JavaScript を HTML ページに入れ、D3.js を使用します。私はこれを試します：

<!DOCTYPE html>
<meta charset="utf-8">

<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
var svg = d3.select("body").append("svg")
    .attr("width", 300)
    .attr("height", 300)
    .attr("id","svgBox");

var svgRect = svg.append("rect")
    .attr("width", 200)
    .attr("height", 200)
    .attr("x", 50)
    .attr("y", 50)
    .attr("id","rect1")
    .style("fill", "#AAFFAA")
    .style("stroke", "#222222");

var root = document.getElementById("svgBox");
var rpos = root.createSVGRect();
rpos.x = 150;
rpos.y = 150;
rpos.width = rpos.height = 1;

var list = root.getIntersectionList(rpos, null);
console.info(list);
</script>

しかし、うまくいきません。Firefoxで試してみると、エラーは

TypeError: root.getIntersectionList は関数ではありません

また、Chrome ではエラーは発生しませんが、リストの結果が常に空であるため、関数が機能していないようです。

関数を呼び出す方法はありますか、または別の方法を使用してポイントがパス内にあるかどうかを検出する必要がありますか?

4

1 に答える 1

4

そのブラウザはまだgetInsectionListメソッドをサポートしていないため、Firefox エラーが予想されます: https://bugzilla.mozilla.org/show_bug.cgi?id=501421

Chrome に関しては、呼び出しの実行時に svg ノードがレンダリングされないというタイミングの問題があると思いますgetIntersectionList。コードをイベント ループの最後にプッシュすると、動作するはずです。

window.setTimeout(function(){
    // your original code as-is:
    var root = document.getElementById("svgBox");
    var rpos = root.createSVGRect();
    rpos.x = 150;
    rpos.y = 150;
    rpos.width = rpos.height = 1;

    var list = root.getIntersectionList(rpos, null);
    console.info(list);
},0)

いずれにせよ、これを別のイベント (マウス クリックなど) 内に含めることになると思いますが、上記で概念を証明できるはずです。

交差テストの別のアプローチ (Chrome のみをサポートしている場合を除き、おそらく必要になるでしょう) については、次の質問を参照してください: d3 - 特定の x、y 位置にあるものを参照してください。

コードの効率に関するもう 1 つの無関係な提案: d3 には、選択範囲の基になる DOM ノードを提供するnode() メソッドがあります。d3 の svg オブジェクトへの参照が既にあるため、これを変更できます。

var root = document.getElementById("svgBox");

これに：

var root = svg.node();
于 2013-08-09T15:46:07.273 に答える