javascript - 我无法移动节点，力图不适用于 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

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

在此代码中(仅存在于您的 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);

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