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

在前面的一个问题中，一位用户帮助我解决了一个问题，即不知道如何将图像放置在圆圈所在的位置。这次我的问题是我不能拖动节点。这个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);

这是我的完整代码：

---

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

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

var drag\u handler=d3.drag（）
。打开（“开始”，拖动开始）
.打开（“拖动”，拖动）
.打开（“结束”，拖动至“结束”）；
拖拽处理器（节点）；

变量

节点

就是图形。实际上，您需要一组元素来影响从函数（如

.enter（）

）中获取的内容。变量

nodecrcleenter

包含该集合，因此特定行应为：

drag\u处理程序（nodecrcleenter）；

---

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

它似乎有效。。如何才能使节点的拖动不与缩放的全局g元素的拖动混淆…@yavg我不知道你的意思。据我所知，这一变化足以使其独立地适用于拖动元素和平移/缩放效果。我理解我的问题，当我试图用光标在文本上拖动节点时，节点不移动，场景移动。我不知道我是否明白了自己的意思。你知道我如何修复它吗？@yavg正如我在回答中所解释的，这是因为标签不是节点的子节点。一个明显的解决方案是将标签安排为节点元素的子元素。请回答最后一个问题，弯曲链接的属性是什么？我的代码与此不同，这就是我不知道的原因。