getIntersectionList从d3.js html [英] getIntersectionList from a d3.js html
问题描述
我正在尝试重现此SVG 解释的行为在 this post ，但将JavaScript放在HTML页面中，并使用D3.js.我试试这个：
I'm trying to reproduce the behaviour of this SVG explained at this post, but putting the JavaScript in the HTML page, and using D3.js. I try this:
<!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中尝试时，错误是
But it doesn't work. When trying it in Firefox, the error is
TypeError：root.getIntersectionList不是函数
TypeError: root.getIntersectionList is not a function
在Chrome中，没有错误，但该函数似乎不工作，因为列表中的结果总是为空。
And in Chrome, there is no error, but the function doesn't seem to work, since the result in list is always empty.
有没有办法调用函数，或者我应该通过使用另一种方法来检测点是否在路径内。
Is there a way to call the function or I should detect if the point is inside the path by using another method?
推荐答案
由于浏览器尚不支持 getInsectionList 方法，因此Firefox错误是可以预期的： https://bugzilla.mozilla.org/show_bug.cgi?id=501421
The Firefox error is to be expected since that browser doesn't yet support getInsectionList method: https://bugzilla.mozilla.org/show_bug.cgi?id=501421
关于Chrome，我认为你有一个时间问题，其中svg节点不呈现在您执行 getIntersectionList 调用时。如果你把代码推到事件循环的结尾，它应该工作：
Regarding Chrome, I think you have a timing issue where the svg nodes aren't rendered at the time you execute your getIntersectionList call. If you push the code to the end of the event loop it should work:
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)
（例如鼠标点击），但上面应该让你证明这个概念。
Probably you're going to have this inside some other event (e.g. mouse click) anyway, but the above should let you prove out the concept.
关于交叉测试的替代方法（你可能需要除非您只支持Chrome），请参阅此问题： d3 - 查看什么是在特定的x，y位置
Regarding alternate approach to intersection testing (which you'll probably need unless you support only Chrome), see this question: d3 - see what is at a particular x,y position
另一个关于代码效率的不相关建议：d3有一个 node（）方法，它为您提供选择的基础DOM节点。因为你已经有对d3的svg对象的引用，你可以改变这：
And one other unrelated suggestion on the efficiency of your code: d3 has a node() method which gives you the underlying DOM node of the selection. Since you already have a reference to d3's svg object, you can change this:
var root = document.getElementById("svgBox");
：
var root = svg.node();
这篇关于getIntersectionList从d3.js html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![此SVG](\"http://files.myopera.com/MacDev_ed/svg/intersection/sandbox_hover.svg\"){kind=link}