web-dev-qa-db-fra.com

Comment sélectionner l'élément parent de l'élément en cours dans d3.js

Je veux accéder à l'élément parent de l'élément en cours

Voici la structure du HTML

svg
   g id=invisibleG
     g
       circle
     g
       circle
     g
       circle

En gros, je veux ajouter du texte dans les cercles lorsque je les survole.

Donc, je veux quelque chose comme ça en vol stationnaire d'un cercle particulier

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

En survol, je peux sélectionner l'élément en cours via d3.select (this), comment puis-je obtenir un élément racine (g dans mon cas)?

javascriptd3.js
51
user3074097

Vous pouvez utiliser d3.select(this.parentNode) pour sélectionner l'élément parent de l'élément actuel. Et pour sélectionner l’élément racine, vous pouvez utiliser d3.select("#invisibleG").

95
cuckovic

Pour obtenir l'élément racine g (comme le souligne cuckovic), utilisez:

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

Cela retournera un objet d3 sur lequel vous pouvez appeler des fonctions telles que:

transform = g.attr("transform");

En utilisant

d3.select(this.parentNode)

retournera simplement l'élément SVG. Ci-dessous, j'ai testé les différentes variantes.

// 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