web-dev-qa-db-ja.com

d3.jsで現在の要素の親要素を選択する方法

現在の要素の親要素にアクセスしたい

これが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）を取得するにはどうすればよいですか？

javascriptd3.js
51
user3074097

d3.select(this.parentNode)を使用して、現在の要素の親要素を選択できます。ルート要素を選択するには、d3.select("#invisibleG")を使用できます。

95
cuckovic

ルート要素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 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>
16
Molossus