如何在D3 force布局图中添加图像作为节点？

var nodes = [
  { x: 50, y: 50, size: 20, image: "image1.jpg" },
  { x: 100, y: 100, size: 30, image: "image2.jpg" },
  // 其他节点...
];

var simulation = d3.forceSimulation(nodes)
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(width / 2, height / 2))
  // 其他力导向布局设置...
  .on("tick", ticked);

var node = svg.selectAll(".node")
  .data(nodes)
  .enter().append("g")
  .attr("class", "node")
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));

node.append("image")
  .attr("xlink:href", function(d) { return d.image; })
  .attr("x", function(d) { return -d.size / 2; })
  .attr("y", function(d) { return -d.size / 2; })
  .attr("width", function(d) { return d.size; })
  .attr("height", function(d) { return d.size; });

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

function ticked() {
  node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  // 其他连线的更新...
}