Question

jsfiddle https://jsfiddle.net/z7ju3z1q/3/

问题是，我不能让标题与工作模拟的团队保持一致。从simulation.nodes（节点）改变第76行;到simulation.nodes（node）;打破模拟（显然），但让标题坚持圈子。据我所知，问题在于拖动工作圈而不是群组，出于某种原因。这就是我一整天都面临的问题。

我试着像这样描述标题（第38行）

var title = g.selectAll("text");

然后将其添加到勾号（第84行）

function ticked() {
    title.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
}

Answer 1

据我了解，问题在于拖动工作圈而不是群组，出于某种原因

您正在使用cx和cy属性操纵拖动节点。 g元素没有这些元素，因此即使node包含组而不是圆圈，这也无法达到您想要的效果：

  node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })

如上所述，node = g.append("circle")表示您实际上并未实际操纵g元素，这就是为什么您的圈子会在勾选或拖动时移动。

相反，请保持节点选择g个元素，并操纵transform属性：

  // the group representing each node:
  node = node.enter().append("g").merge(node);

  // the circle for each group
  node.append("circle")
  .classed('node', true).attr('id', id)
  .text(id)
  .attr("r", 25).attr("fill", function(d) { return color(d.id); });

  // the text for each group
  node.append("text")
  .classed('text', true)
  .attr("text-anchor", "start")
  .attr("dx", 6).text(id).merge(node);

然后，在点击或拖动事件时，只需更新转换：

蜱：

  node.attr("transform",function(d) { return "translate("+d.x+","+d.y+")" ;});

拖动：

  d.x = d3.event.x;
  d.y = d3.event.y;
  d3.select(this).attr("transform",function(d) { return "translate("+d.x+","+d.y+")" ;});

这里是updated fiddle。

使d3 v4组对模拟做出反应

1 个答案: