Силовая компоновка - маркировка и закрепление узлов

Question

Я строю свое собственное силовое сопротивление, основанное на 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); 
}) 

код работает отлично, если я использую один из них. Но в сочетании, это не ведет себя должным образом. Как я могу активировать оба из них? Если htere - еще один способ привязать узлы, это здорово.

Answer 1

Я думаю, что это было бы лучшим решением: http://jsfiddle.net/bzas8j5z/

var dragstart = function(d) { 
    d.fixed = true; 
}; 

var drag = force.drag(). 
    on("dragstart", dragstart); 

var node = svg.selectAll(".node") 
    .data(graph.nodes) 
    .enter().append("g") 
    .attr("class", "node") 
    .call(drag); 

Ссылка здесь: https://gist.github.com/mbostock/3750558

Answer 2

Это не может быть !!!

я решил вопрос с этим фрагментом кода:

node.on("mousedown", function(d) { d.fixed = true; }); 

Надеюсь, кто-то выиграет от этого решения.