使D3 V4团反应到模拟

Question

的jsfiddlehttps://jsfiddle.net/z7ju3z1q/3/

的问题是，我不能让冠军坚持与工作组的模拟。 将行76从simulation.nodes（节点）更改;到simulation.nodes（节点）;打破模拟（显然），但使标题坚持圈。据我所知，问题在于，由于某种原因，拖着圈子工作，但没有与团队合作。这就是我一整天都面临的问题。

我试图描述标题这样的（线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。