Как работает выбор узла 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; 
       }); 
     } 

Но в этом методе клеща, вместо того чтобы дать x и y Позиция в foreignObject он назначая позицию body элемента внутри foreignObject, который делает узел не положение в реальных координатах.

Теперь код действительно работает (если я удаляю foreignObject и размещаю тег другого элемента, и позиция присваивается этому элементу), поэтому я думаю, что есть проблема в моей инструкции selector и append, которая создает 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));