CODEWITHSUNDEEP
javascriptd3.jsforce-layout
Amiga500
Amiga500

Reputation: 6131

Force Layout - Labelling and pinning down the nodes

I am building my own force drag based on d3js. I am following great example site, that has almost all that I need:

I have run in to the problem, that I am afraid I can't solve, since I do not have sufficient knowledge of the d3js.

I am trying to combine two features: - Dragging the nodes, they stay where I release them - All nodes have a name on top of them, so when I drag them, the name is also following the node.

Issue that I have is, when the diagram is loaded it properly displays the nodes and their respective names. But when I drag them, the text remains on the screen.

This is the sample code that does the labeling, full jsfiddle is here:

Code sample that does labeling:

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;
});

This is the sample code that does the pinning, full jsfiddle is 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();
}

What I have done I have combined both code samples. Nodes are initially properly rendered, but when I try to drag it so they are pinned, the labes stay at their originial position and dont get updated (not following the nodes). This is the place where I initialize those two:

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);
})

Code works fine, if I use one of them. But when combined, it is not behaving properly. How can I have both of them activated? If htere is another way to pin the nodes, that is great.

Upvotes: 2

Views: 2075

Answers (2)

Yoni Mor
Yoni Mor

Reputation: 354

I think this would be a better solution: 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);

Reference here: https://gist.github.com/mbostock/3750558

Upvotes: 2

Amiga500
Amiga500

Reputation: 6131

This cant be!!!

I solved the issue with this piece of code:

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

Hopefully someone else will benefit from this solution.

Upvotes: 0

Related Questions