使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。