javascript - 尝试将图像放入节点内时，它们不会保持在力布局中的正确位置

Question

我试图让我的节点是图像，并且这些位于节点中。但由于某种原因，他们停留在左上角。我根据示例尝试了很多事情，但我不知道我的问题出在哪里。

var node = g.selectAll("g.node")
  .data(graph.nodes)
  //.filter(function(d){ return d.type=="circle"; })
var NodeCircleEnter= node.enter().append("g")
  .attr("class","node")
  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })

  NodeCircleEnter
  .append("circle")
  .attr("r", 20)
  .attr("fill", function(d) {
    return colorNode(d.group);
  })
  .style("stroke", function(d) {
    return colorNode(d.group);
  })

 // Append images
 var images = NodeCircleEnter.append("svg:image")
    .attr("xlink:href",  function(d) {console.log(d); return d.image;})
    .attr("x", function(d) { return -25;})
    .attr("y", function(d) { return -25;})
    .attr("height", 50)
    .attr("width", 50);

这是我的完整代码。

https://plnkr.co/edit/C2x7Zw5FkXHCUEpgWYWE?p=preview

现在，我无法移动节点：

标签： javascriptd3.js