D3 노드 그래프에서 D3 노드 선택이 어떻게 작동합니까?

Question

나는 force graph를 만들고 각 노드에 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 내부 body 요소 위치를 지정하고있다 x y 위치 foreignObject에주는.

코드가 작동합니다 (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));