D3 layout with draggable nodes - d3.js

Question

I have created a forced layout graph. it is working fine.
Now I need to make the blocks draggable such that, even after dragging the block it should not affect the other blocks as shown in this example.
Here's what I tried:
d3.json("links.json", function(error, links) {
var nodes = {};
// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});
var width = 1000,
height = 700;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.gravity(0.01)
.size([width, height])
.linkDistance(200)
.charge(-600)
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// Per-type markers, as they don't inherit styles.
svg.append("defs").selectAll("marker")
.data(["forward","back"]) //use .data(["forward","back","front"]) for different types of data
.enter().append("marker")
.attr("id", function(d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 100)
.attr("refY", 1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-4L10,0L0,5");
var path = svg.append("g").selectAll("path")
.data(force.links())
.enter().append("path")
.attr("class", function(d) { return "link " + d.type; })
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
var rect = svg.append("g").selectAll("rect")
.data(force.nodes())
.enter().append("rect")
.attr("x", -20)
.attr("y", -20)
.attr("width", function(d) { return (d.weight*40); })
.attr("height", function(d) { return (d.weight*20); })
.call(force.drag).on("mouseover", fade(.1))
.on("mouseout", fade(1));;
force.drag().on('drag', fade(.1));
var text = svg.append("g").selectAll("text")
.data(force.nodes())
.enter().append("text")
.attr("x", 0)
.attr("y", ".41em")
.text(function(d) { return d.name; });
// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
rect.attr("transform", transform);
path.attr("d", linkLine);
text.attr("transform", transform);
}
function transform(d) {
return "translate(" + d.x + "," + d.y + ")";
}
});
</script>
</body>
</html>
And data in links.json file is
[{"source": "Delhi", "target": "Mangalore", "type": "forward"},
{"source": "Mangalore", "target": "Delhi", "type": "back"},
{"source": "Delhi", "target": "Yashvanthpur", "type": "back"},
{"source": "Mangalore", "target": "Rome", "type": "forward"},
{"source": "Delhi", "target": "Mysore", "type": "forward"},
{"source": "Chandigarh", "target": "Vellore", "type": "forward"},
{"source": "Chandigarh", "target": "Mangalore", "type": "forward"},
{"source": "Delhi", "target": "Nagpur", "type": "forward"}
]
Are there any methods so that, I will not get any movements in the other nodes, even though I drag some node in the graph?
Is there any separate method to accomplish that?

Answer 1

Set property fixed to true for each node when force simulations are stopped.
force.on('end', function(d) {
links.forEach(function(l) {
l.source.fixed = true;
l.target.fixed = true;
})
});
var links = [{
"source": "Delhi",
"target": "Mangalore",
"type": "forward"
},
{
"source": "Mangalore",
"target": "Delhi",
"type": "back"
},
{
"source": "Delhi",
"target": "Yashvanthpur",
"type": "back"
},
{
"source": "Mangalore",
"target": "Rome",
"type": "forward"
},
{
"source": "Delhi",
"target": "Mysore",
"type": "forward"
},
{
"source": "Chandigarh",
"target": "Vellore",
"type": "forward"
},
{
"source": "Chandigarh",
"target": "Mangalore",
"type": "forward"
},
{
"source": "Delhi",
"target": "Nagpur",
"type": "forward"
}
];
var nodes = {};
// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {
name: link.source
});
link.target = nodes[link.target] || (nodes[link.target] = {
name: link.target
});
});
var width = 1000,
height = 700;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.gravity(0.01)
.size([width, height])
.linkDistance(200)
.charge(-600)
.on("tick", tick)
.start()
force.on('end', function(d) {
links.forEach(function(l) {
l.source.fixed = true;
l.target.fixed = true;
})
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// Per-type markers, as they don't inherit styles.
svg.append("defs").selectAll("marker")
.data(["forward", "back"]) //use .data(["forward","back","front"]) for different types of data
.enter().append("marker")
.attr("id", function(d) {
return d;
})
.attr("viewBox", "0 -5 10 10")
.attr("refX", 100)
.attr("refY", 1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-4L10,0L0,5");
var path = svg.append("g").selectAll("path")
.data(force.links())
.enter().append("path")
.attr("class", function(d) {
return "link " + d.type;
})
.attr("marker-end", function(d) {
return "url(#" + d.type + ")";
});
var rect = svg.append("g").selectAll("rect")
.data(force.nodes())
.enter().append("rect")
.attr("x", -20)
.attr("y", -20)
.attr("width", function(d) {
return (d.weight * 40);
})
.attr("height", function(d) {
return (d.weight * 20);
})
.call(force.drag).on("mouseover", fade(.1))
.on("mouseout", fade(1));;
force.drag().on('drag', fade(.1));
var text = svg.append("g").selectAll("text")
.data(force.nodes())
.enter().append("text")
.attr("text-anchor", "middle")
.attr("x", function(d){ return -20+(d.weight * 20) })
.attr("y", function(d){ return -20+(d.weight * 20)/2 })
.text(function(d) {
return d.name;
});
// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
rect.attr("transform", transform);
path.attr("d", linkLine);
text.attr("transform", transform);
}
var linkedByIndex = {};
links.forEach(function(d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
function isConnected(a, b) {
return linkedByIndex[a.index + "," + b.index] ||
linkedByIndex[b.index + "," + a.index] ||
a.index == b.index;
};
function linkLine(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y;
return "M" + d.source.x + "," + d.source.y + "L" + d.target.x + "," + d.target.y;
}
function transform(d) {
return "translate(" + d.x + "," + d.y + ")";
}
// For fade-in and fade-out effect
function fade(opacity) {
return function(d) {
rect.style("stroke-opacity", function(o) {
thisOpacity = isConnected(d, o) ? 1 : opacity;
this.setAttribute('fill-opacity', thisOpacity);
return thisOpacity;
});
rect.style("stroke-opacity", opacity)
.style("stroke-opacity", function(o) {
return o.source === d || o.target === d ? 1 : opacity;
});
};
};
.link {
fill: none;
stroke: #666;
stroke-width: 2px;
}
#forward {
fill: green;
}
#back {
fill: red;
}
<!-- #back {
fill: green;
}
-->.link.forward {
stroke: green;
}
.link.back {
stroke: green;
}
rect {
fill: #a5b0ed;
stroke: #333;
stroke-width: 2px;
}
text {
font: 10px sans-serif;
pointer-events: none;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>