web-dev-qa-db-fra.com

D3 obtenir les attributs de l'élément

J'essaie certains d3 de base et j'ai essayé d'obtenir les attributs de chacun des rect en utilisant d3 mais je ne peux rien obtenir.

Console Screen

Quand j'essaie d3.selectAll("rect"), j'obtiens

result

Comment puis-je accéder aux attributs de rect en utilisant quelque chose comme d3.selectAll("rect").select("part1").attr(...) ou quelque chose de similaire? Je veux accéder à différents attributs de tous les rect.

javascriptd3.jssvg
10
Albin Vinoy

Vous pouvez obtenir n'importe quel attribut d'un élément en utilisant un getter:

d3.select(foo).attr("bar")

Qui est essentiellement la fonction attr() avec un seul argument.

Voici une démo. Il existe deux classes de rectangles, part1 Et part2. Je sélectionne tous les rectangles part1 Et j'obtiens leurs positions x:

var svg = d3.select("svg");
var rects = svg.selectAll("foo")
  .data(d3.range(14))
  .enter()
  .append("rect")
  .attr("fill", "teal")
  .attr("y", 20)
  .attr("x", d => 10 + 12 * d)
  .attr("height", 40)
  .attr("width", 10)
  .attr("class", d => d % 2 === 0 ? "part1" : "part2");

d3.selectAll(".part1").each(function(d,i) {
  console.log("The x position of the rect #" + i + " is " + d3.select(this).attr("x"))
})
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
19
Gerardo Furtado