div内のdivの位置情報を取得する

Question

divの内側にsvgを含むforeignObjectを使用しました（divの代わりにrectを使用しようとしましたが、as in this exampleですが、extendability-wiseでdivが最適です）。

特定のクラスの各divの末尾にsvg円を追加したいとします。上記の例では、すべての要素に円を追加していますが、クラスセレクタでフィルタリングしたいと思います。どうすればd3でこれを達成できますか？

var leafnodes = new Array(); 
d3.select("#input-container-div").selectAll(".leaf") 
    .each(function() { 
     leafnodes.push(d3.select(this).style("top")); 
    }); 

私は上記のコードを使用しましたが、そのCSSが "トップ"の値を定義していないため "0px"になります。

また、this questionで解決策を試しましたが、何らかの理由でそれが機能しません。

Answer 1

foreignObjectを使用してdivを追加したので、xとyの値をdiv32ではなくforeignObjectに設定しました。したがって、divの親である外部オブジェクトを選択する値を取得する必要があります。各div要素の親（foreignObject）の "X" 値の取得

：

：この単純なSVGを与え、例えば

var leafnodes = new Array(); 
d3.select("#input-container-div").selectAll(".leaf") 
    .each(function() { 
     leafnodes.push(d3.select(this.parentNode).attr("x")); 
    }); 

を、我々は、xとyの位置をCONSOLE.LOGすることができます

var leafnodes = new Array(); 
 
d3.select("svg").selectAll("div") 
 
    .each(function() { 
 
    leafnodes.push({x: d3.select(this.parentNode).attr("x"), 
 
y: d3.select(this.parentNode).attr("y")}); 
 
    }); 
 

 
console.log(JSON.stringify(leafnodes))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<svg width="500" height="300" style="border:1px red solid"> 
 
    <foreignobject x="40" y="20" width="100" height="100"> 
 
     <div style="border:1px green solid">I'm a div inside a SVG.</div>     
 
    </foreignobject> 
 
    <foreignobject x="300" y="120" width="100" height="100"> 
 
     <div style="border:1px green solid">I'm another div inside a SVG.</div>     
 
    </foreignobject> 
 
</svg>