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

Firefox 错误是意料之中的，因为该浏览器尚不支持getInsectionList方法：https ://bugzilla.mozilla.org/show_bug.cgi?id=501421

关于 Chrome，我认为您有一个时间问题，即在您执行getIntersectionList呼叫时未呈现 svg 节点。如果将代码推送到事件循环的末尾，它应该可以工作：

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 位置的内容

还有一个关于代码效率的不相关建议：d3 有一个node() 方法，它为您提供了选择的底层 DOM 节点。由于您已经引用了 d3 的 svg 对象，因此您可以更改：

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

对此：

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