想要在D3.js中鼠标悬停时使用图像扩展节点

Question

我正在尝试在D3.js中扩展鼠标悬停事件上的节点，但由于我已将图像附加到节点，因此该功能似乎不再起作用。它在没有图像的情况下工作得很好，但是我希望它在鼠标悬停时扩展并在鼠标再次离开节点时将其恢复正常。关于我哪里出错的任何建议？

var node = svg.selectAll(".node")
  .data(json.nodes)
  .enter().append("g")
  .attr("class", "node")
  .call(force.drag)
  .on('mouseover', connectedNodes)
  .on('mouseout', allNodes)
  .on('contextmenu', function(d) {
    d3.event.preventDefault();
    tip.show(d);
  }) //.on('mousedown', tip.show)
  .on('mouseleave', tip.hide);

node.append("circle")
  .attr("r", function(d) {
    return d.degree;
  })
  .style("fill", function(d) {
    return color(d.group);
  })
  .on('mouseenter', function() {
    // select element in current context
    d3.select(this)
      .transition()
      .attr("r", function(d) {
        return d.degree + 10;
      });
  })
  // set back
  .on('mouseleave', function() {
    d3.select(this)
      .transition()
      .attr("r", function(d) {
        return d.degree;
      });
  });

node.append("clipPath")
  .attr("id", function(d, i) {
    return "node_clip" + i
  })
  .append("circle")
  .attr("r", function(d) {
    return d.degree - 1;
  });

node.append("image")
  .attr("xlink:href", function(d) {
    return d.image;
  })
  .attr("x", function(d) {
    return -d.degree
  })
  .attr("y", function(d) {
    return -d.degree
  })
  .attr("height", function(d) {
    return d.degree * 2
  })
  .attr("width", function(d) {
    return d.degree * 2
  })
  .attr("clip-path", function(d, i) {
    return "url(#node_clip" + i + ")"
  });