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;
                });
        }

但是在这个 tick 方法中，不是将 x 和 y 位置给 foreignObject，而是将位置分配给 foreignObject 中的 body 元素，这使得节点不在实际坐标位置。

现在，代码确实有效（如果我删除 foreignObject 并放置另一个元素标签，并且位置已指定给该元素），所以我认为我的选择器和附加语句中存在问题，创建 foreignObject 上面，因为它正在选择元素的内部主体。

Answer 1

d3 方法链接 returns 最后一件事 returns 东西，在你的情况下这是 .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));

D3力图中的D3节点选择是如何工作的？

How does D3 node selection work in D3 force graph?

d3.js

force-layout