问

如何在d3.js中选择当前元素的父元素

爱得书签_902 发布于 2023-02-09 18:42

html

我想访问当前元素的父元素

这是HTML的结构

svg
   g id=invisibleG
     g
       circle
     g
       circle
     g
       circle

基本上我想在我将鼠标悬停在圈子上时在圈子中添加文字.

所以我希望在任何特定圈子的悬停上都有这样的东西

svg
       g id=invisibleG
         g
           circle --> radius is increased and text presented inside that
           text
         g
           circle
         g
           circle

在悬停时我可以通过d3.select(this)选择当前元素,如何获得根元素(在我的情况下为g)？

2 个回答

要获得根元素g(如cuckovic指出的那样)可以使用:

circle = d3.select("#circle_id"); 
g = circle.select(function() { return this.parentNode; })

这将返回一个d3对象,您可以在其上调用以下函数:

transform = g.attr("transform");

运用

d3.select(this.parentNode)

将只返回SVG元素.下面我测试了不同的变种.

// 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="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<html>

<body>
  <svg  >
 <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>


                
                    2023-02-09 18:44  回答
                       huangyong黄勇_513


                        
                您可以使用d3.select(this.parentNode)选择当前元素的父元素.并且为了选择你可以使用的根元素d3.select("#invisibleG").

        
                
                    2023-02-09 18:44  回答
                       mobiledu2502881211



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签