如何在d3.js中select当前元素的父元素
我想访问当前元素的父元素
这是HTML的结构
svg g id=invisibleG g circle g circle g circle 基本上我想在鼠标hover在圆圈内时添加文本。
所以我希望在任何特定的圈子上hover
svg g id=invisibleG g circle --> radius is increased and text presented inside that text g circle g circle
hover时，我可以通过d3.select（this）select当前元素，我怎样才能获得根元素（g在我的情况下）？
你可以使用d3.select(this.parentNode)来select当前元素的父元素。 而为了select根元素，你可以使用d3.select("#invisibleG") 。
为了得到根元素g（如cuckovic指出）可以得到使用：
circle = d3.select("#circle_id"); g = circle.select(function() { return this.parentNode; })
这将返回一个d3对象，您可以在其中调用如下函数：
transform = g.attr("transform");
运用
d3.select(this.parentNode)
将只返回SVG元素。 下面我testing了不同的变体。
// Variant 1 circle = d3.select("#c1"); g = d3.select(circle.parentNode); d3.select("#t1").text("Variant 1: " + g); // This fails: //transform = d3.transform(g.attr("transform")); // Variant 2 circle = d3.select("#c1"); g = circle.node().parentNode; d3.select("#t2").text("Variant 2: " + g); // This fails: //transform = d3.transform(g.attr("transform")); // Variant 3 circle = d3.select("#c1"); g = circle.select(function() { return this.parentNode; }); transform = d3.transform(g.attr("transform")); d3.select("#t3").text("Variant 3: " + transform);
<script src="ajax/libs/d3/3.4.11/d3.min.js"></script> <html> <body> <svg height="200" width="300"> <g> <circle id="c1" cx="50" cy="50" r="40" fill="green" /> </g> <text id="t1" x="0" y="120"></text> <text id="t2" x="0" y="140"></text> <text id="t3" x="0" y="160"></text> </svg> </body> </html>
