D3要素から属性を取得

Question

私は基本的なd3を試していますが、私はのそれぞれの属性を取得しようとしていますが、何も取得できません。

私はd3.selectAll("rect")をしようとすると、私は私がまたは類似のもののようなものを使用してrectの属性にアクセスすることができますどのように

を取得しますか？私はすべてrectの異なる属性にアクセスしたいと思います。

Answer 1

あなたはゲッター使用して、要素の任意の属性を取得することができます

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

基本的にはただ一つの引数を持つattr()機能です。

ここはデモです。矩形には、part1とpart2の2つのクラスがあります。私はすべてのpart1長方形を選択し、その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>