我无法移动节点，力图不适用于3.js

Question

在上一个问题中，一个非常明智的用户帮助我解决了一个问题，该问题包括不知道如何将图像放置在圆圈上。这次，我的问题是我无法拖动节点。此gif说明了我的问题（首先，我说明了节点应如何正常移动，然后说明了我的问题。）

为什么会这样？

var link = g.append("g")
  .attr("class", "links")
  .selectAll("line")
  .data(graph.links)
  .enter().append("line")
  .attr("stroke", function(d) {
    console.log(d);
    return colorLink(d.group);
  })
  .attr("marker-end", "url(#arrow)");

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/9uH13N3or3G9VTgQlMm9?p=preview

Answer 1

您的事件处理程序需要应用于元素本身，而不是整个画布。

在此代码中（仅存在于您的Plunker项目中，而不存在于您的问题中）：

var drag_handler = d3.drag()
  .on("start", drag_start)
  .on("drag", drag_drag)
  .on("end", drag_end);

drag_handler(node);

您的变量node是图形。实际上，您实际上希望元素集合能够影响从.enter()之类的函数中获取的元素。您的变量NodeCircleEnter包含该集合，因此特定行应为：

drag_handler(NodeCircleEnter);

这仍然留下一个问题，即在标签本身上拖动不起作用。这是因为标签不是您设置处理程序的元素的子级。