强制布局-标记和固定节点

我正在基于d3js构建自己的力阻力。我正在效仿伟大的榜样 site ,这几乎满足了我的所有需求:

我遇到了这个问题,我恐怕无法解决,因为我对d3js没有足够的知识。

我尝试结合两个功能: -拖动节点,它们停留在我释放它们的位置 -所有节点的顶部都有一个名称,因此当我拖动它们时,名称也跟着节点。

我遇到的问题是,当加载图表时,它会正确地显示节点及其各自的名称。但当我拖动它们时,文本仍会显示在屏幕上。

这是做标签的示例代码,完整的jsfiddle是 here :

进行标记的代码示例:

var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("circle")
.attr("r", 8)
.style("fill", function (d) {
return color(d.group);
})
node.append("text")
  .attr("dx", 10)
  .attr("dy", ".35em")
  .text(function(d) { return d.name })
  .style("stroke", "gray");
force.on("tick", function () {
link.attr("x1", function (d) {
    return d.source.x;
})
    .attr("y1", function (d) {
    return d.source.y;
})
    .attr("x2", function (d) {
    return d.target.x;
})
    .attr("y2", function (d) {
    return d.target.y;
});   

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

d3.selectAll("text").attr("x", function (d) {
    return d.x;
})
    .attr("y", function (d) {
    return d.y;
});

这是执行固定的示例代码,完整的jsfiddle是 here

var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 8)
.style("fill", function (d) {
return color(d.group);
})
.on('dblclick', releasenode)
.call(node_drag);
 var node_drag = d3.behavior.drag()
    .on("dragstart", dragstart)
    .on("drag", dragmove)
    .on("dragend", dragend);

function dragstart(d, i) {
   force.stop() //stop the force auto positioning before you start dragging
}

function dragmove(d, i) {
    d.px += d3.event.dx;
    d.py += d3.event.dy;
    d.x += d3.event.dx;
    d.y += d3.event.dy; 
}

function dragend(d, i) {
    d.fixed = true; // 
    force.resume();
}

function releasenode(d) {
    d.fixed = false; // 
    //force.resume();
}

我所做的是将两个代码示例结合起来。节点最初是正确渲染的,但当我尝试拖动它以固定它们时,标签会保持在原始位置,不会更新(不跟随节点)。 这是我初始化这两个的地方:

var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")    
.style("fill", function (d) {
return color(d.group);
 })
.call(force.drag) //-- HERE -- Take care of labels  
.on('dblclick', connectedNodes) //Added code 
.on('mouseover', tip.show) //Tool tip show
.on('mouseout', tip.hide) //Tool tip remove 
//.on('click', navigateToPage)//Add event listener to open another Form
//.call(node_drag); //-- HERE --Drag Nodes to position

node.append("circle")
.attr("r", 8)
.style("fill", function (d) {

return color(d.group);
})

如果我使用其中一个,代码可以正常工作。但当两者结合在一起时,它的行为就不正常了。如何激活这两个功能?如果这是另一种固定节点的方法,那就太好了。