D3フォースグラフでD3ノード選択はどのように機能しますか？

Question

私は力グラフを作成し、各ノードにforeignObjectを挿入しようとしています。

simulation 
      .nodes(graph.nodes) 
      .on("tick", ticked) 
      .on("end", graphended); 

     var node = svg.append("g") 
        .attr("class", "nodes") 
        .selectAll("circle") 
        .data(graph.nodes) 
        .enter().append("foreignObject") 
           .attr("width",img_w) 
           .attr("height",img_h) 
          .append("xhtml:body") 
          .html(function(d){ 
           return '<span class="custom-icon-container-circle">Some sample content</span>'; 
          }) 
          .call(d3.drag() 
            .on("start", dragstarted) 
            .on("drag", dragged) 
            .on("end", dragended)); 

とTICK機能で、私はxとy座標を割り当てる方法を以下ました。

function ticked() { 
      node 
       .attr("x", function(d) { 
        var xPos = findPosX(d.x, img_w); 
        return xPos-img_w/2; 
       }) 
       .attr("y", function(d) { 
        var yPos = findPosY(d.y, img_h); 
        return yPos-img_h/2; 
       }); 
     } 

しかし代わりforeignObjectにxとy位置を与えるこのティック法では、実際の座標のノードではない位置を作っているのforeignObject内部body要素に位置を割り当てています。

ここで、コードは機能します（foreignObjectを削除して別の要素タグを配置し、その要素にその位置が与えられている場合）ので、上記のようにforeignObjectを作成するセレクタと追加文に問題があると思います。要素の本体を選択しています。

Answer 1

d3メソッドチェーンでは、これが.append("xhtml:body")であるあなたの場合には、何かを返す最後のものを返し、そうnodeはないforeignObjectにそれへの参照を保持しています。コードを次のように変更してください：

var node = svg.append("g") 
.attr("class", "nodes") 
.selectAll("circle") 
.data(graph.nodes) 
.enter().append("foreignObject") 
.attr("width",img_w) 
.attr("height",img_h); 

node.append("xhtml:body") 
    .html(function(d){ 
    return '<span class="custom-icon-container-circle">Some sample content</span>'; 
    }) 
    .call(d3.drag() 
    .on("start", dragstarted) 
    .on("drag", dragged) 
    .on("end", dragended));