We Keep Coding

End points of the links of the force directed graph always stuck to left corner of the rectangular node

I am creating a force directed graph using v4 of d3.js. The links in the graph are always pointing to the left hand corner of the rectangular nodes.
I think the problem is either in my tick function or my drag handlers. I am not really sure which one is it and what is the problem.
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var simulation = d3.forceSimulation().nodes(nodes_data);
simulation
.force("centre_force", d3.forceCenter(width / 2, height / 2))
.force("charge_force", d3.forceManyBody().strength(-90))
var nodes = svg.append("g")
.attr("class", "nodes")
.selectAll("rect")
.data(nodes_data)
.enter()
.append("g");
var rect_width = 80;
var rect_height = 50;
nodes.append("rect")
.attr("width", rect_width)
.attr("height", rect_height)
.attr("rx", 10)
.attr("ry", 10)
.style("stroke", "black");
nodes.append("text")
.attr("text-anchor", "middle")
.attr("x", rect_width / 2)
.attr("y", rect_height / 2)
.attr("dy", "0.35em")
.text(function (d) { return d.name; });
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(links_data)
.enter().append("line")
.attr("stroke-width", 2);
//defining force for links
var link_force = d3.forceLink(links_data)
.id(function (d) { return d.name; })
.distance(150)
.strength(0.5);
//calling the defined force
simulation.force("links", link_force);
simulation.on("tick", function () {
nodes.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });
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; });
nodes.attr("x", (d) => { return d.x; })
.attr("y", (d) => { return d.y; });
})
//drag function definitions
function drag_start(d) {
simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function drag_drag(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function drag_end(d) {
simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
//drag function binding
var drag_handler = d3.drag()
.on("start", drag_start)
.on("drag", drag_drag)
.on("end", drag_end);
drag_handler(nodes);
I want them to point at the edge of the rectangle and the edge should change dynamically if the position is changed so.
Following is the actual result:
Following is the expected result:

I solved the problem.
First of all, I removed the following code
nodes.attr("x", (d) => { return d.x; })
.attr("y", (d) => { return d.y; });
There was no need for it.
Next, I changed the x and y co-ordinates of the rect element to point to the center of the rect. The default values for x and y is 0 and 0.
In my case, I changed the x to -40 and to y to -25 as following
let rect_width = 80;
let rect_height = 50;
nodes.append("rect")
.attr("width", rect_width)
.attr("height", rect_height)
.attr("rx", 10)
.attr("ry", 10)
.attr("x", -(rect_width / 2))
.attr("y", -(rect_height / 2))
.style("stroke", "black");
Following is my result now
Possibly unecessary information- but to move the links behind my node, I drew the links first and then the nodes later in my code. Referred this answer

how to adjust size of force directed graph in d3.js?

I have implemented a force directed graph which visualizes shared borders between countries.The layout of graph goes out of svg boundaries,is there way to resize the graph size,so that graph layout stays within graph boundaries.can size of simulation be pre set to adjust to the change in the width and height of window?
link to codepen
let request = new XMLHttpRequest();
request.addEventListener("load", loaded);
function loaded() {
const data = JSON.parse(request.responseText);
var nodes = data.nodes;
var links = data.links;
// sets up svg
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// handle color of the nodes i gueess,gotta know what schemeCategory method does
var color = d3.scaleOrdinal(d3.schemeCategory20);
// starts simulation
var simulation = d3
.forceSimulation()
.force("link", d3.forceLink())
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width /2, height / 2))
// creates lines in graph,
var link = svg
.append("g")
.attr("class", "links")
.selectAll("line")
.data(links)
.enter()
.append("line")
.attr("stroke-width", function(d) {
return Math.sqrt(3);
});
//creates nodes..for this example,you need to set node to images
var node = svg
.append("g")
.attr("class", "nodes")
.selectAll(".node")
//pass node data
.data(nodes)
.enter()
.append("image")
.attr("xlink:href",function(d){return "https://cdn.rawgit.com/hjnilsson/country-flags/master/svg/"+d.code+".svg" })
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16)
.call(
d3
.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
);
node.append("title")
.text(function(d) { return d.country; });
simulation.nodes(nodes).on("tick", ticked);
simulation.force("link").links(links);
function ticked() {
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;
});
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
}
request.open(
"GET",
"https://www.cs.mun.ca/~h65ped/Public/country%20data%20for%20force%20directed%20graph/countries.json",
true
);
request.send(null);

The attractive forces of the built-in d3.forceManyBody can be modified with the strength() method so try something like
// starts simulation
var simulation = d3
.forceSimulation()
.force("link", d3.forceLink())
.force("charge", d3.forceManyBody().strength(-5))
.force("center", d3.forceCenter(width /2, height / 2))
If that constrains the other items too closely then you would have to implement your own force method which can constrain items based on the SVG size. See d3.force for a description of what is happening under-the-hood and to see how you could produce your own function.

D3 assigning nodes labels

I'm trying to make a d3 force graph, however I can't manage to let the labels work. Sometimes text pops up in the top of the screen. How do I assign each node a label (the label being its id).
JSFIDDLE
This is what i've tried:
var label = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("text")
.attr("class", "label")
.text("test")
And an extra question, how do I get arrowheads on my lines?

Group circle and text inside a group element. You can use marker-end property to add end markers to the line.
There are marker-mid and marker-start configs too.
var graph = JSON.parse('{"nodes":[{"id":"0","color":"#4444E5"},{"id":"1","color":"#4444E5"},{"id":"2","color":"#CCCCCC"},{"id":"3","color":"#CCCCCC"},{"id":"4","color":"#CCCCCC"},{"id":"5","color":"#CCCCCC"},{"id":"6","color":"#CCCCCC"},{"id":"7","color":"#CCCCCC"},{"id":"8","color":"#CCCCCC"},{"id":"9","color":"#CCCCCC"},{"id":"10","color":"#cc0000"},{"id":"11","color":"#CCCCCC"},{"id":"12","color":"#CCCCCC"},{"id":"13","color":"#CCCCCC"},{"id":"14","color":"#CCCCCC"},{"id":"15","color":"#cc0000"}],"links":[{"source":1,"target":15,"weight":-0.7582412523901727},{"source":0,"target":6,"weight":-0.08179822732917646},{"source":6,"target":10,"weight":0.0939757437427291},{"source":3,"target":4,"weight":0.436380368086641},{"source":4,"target":5,"weight":-0.5385567058738547},{"source":1,"target":2,"weight":-0.277729004201837},{"source":2,"target":3,"weight":0.7675128737907505},{"source":13,"target":14,"weight":0.5519067984674436},{"source":14,"target":15,"weight":0.832660697502495},{"source":5,"target":7,"weight":0.8607887414383458},{"source":7,"target":8,"weight":-0.8965760877371078},{"source":8,"target":9,"weight":-0.2488791800975232},{"source":9,"target":10,"weight":-0.646075500567235},{"source":12,"target":13,"weight":0.40622804770087395},{"source":0,"target":11,"weight":0.24806004723386413},{"source":11,"target":12,"weight":0.8035303834469385}]}');
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var defs = svg.append("defs")
var marker = defs
.append("svg:marker")
.attr("id", "arrow")
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
marker.append("path")
.attr("d", "M0,-5L10,0L0,5")
.attr("class", "arrowHead");
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) {
return d.id;
}))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) {
return Math.sqrt(d.weight);
}).attr("marker-end", "url(#arrow)")
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("g");
node.append("circle")
.attr("r", 5)
.attr("fill", function(d) {
return d3.color(d.color);
})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var label = node.append("text")
.attr("class", "label")
.text("test")
node.append("title")
.text(function(d) {
return d.id;
});
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked() {
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;
});
node
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
line {
stroke: black;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="600"></svg>

Your texts are not part of the simulation. Besides that, when you do...
var label = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("text")
... your "enter" selection will have one element less, because there is already a <g> element with class node in that SVG.
Solution: append both circles and texts to groups:
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("foo")
.data(graph.nodes)
.enter().append("g");
var circles = node.append("circle")
.attr("r", 5)
.attr("fill", function(d) {
return d3.color(d.color);
})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var label = node.append("text")
.attr("class", "label")
.text("test");
And use transform in the ticked function:
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
})
Here is your updated code:
var graph = JSON.parse('{"nodes":[{"id":"0","color":"#4444E5"},{"id":"1","color":"#4444E5"},{"id":"2","color":"#CCCCCC"},{"id":"3","color":"#CCCCCC"},{"id":"4","color":"#CCCCCC"},{"id":"5","color":"#CCCCCC"},{"id":"6","color":"#CCCCCC"},{"id":"7","color":"#CCCCCC"},{"id":"8","color":"#CCCCCC"},{"id":"9","color":"#CCCCCC"},{"id":"10","color":"#cc0000"},{"id":"11","color":"#CCCCCC"},{"id":"12","color":"#CCCCCC"},{"id":"13","color":"#CCCCCC"},{"id":"14","color":"#CCCCCC"},{"id":"15","color":"#cc0000"}],"links":[{"source":1,"target":15,"weight":-0.7582412523901727},{"source":0,"target":6,"weight":-0.08179822732917646},{"source":6,"target":10,"weight":0.0939757437427291},{"source":3,"target":4,"weight":0.436380368086641},{"source":4,"target":5,"weight":-0.5385567058738547},{"source":1,"target":2,"weight":-0.277729004201837},{"source":2,"target":3,"weight":0.7675128737907505},{"source":13,"target":14,"weight":0.5519067984674436},{"source":14,"target":15,"weight":0.832660697502495},{"source":5,"target":7,"weight":0.8607887414383458},{"source":7,"target":8,"weight":-0.8965760877371078},{"source":8,"target":9,"weight":-0.2488791800975232},{"source":9,"target":10,"weight":-0.646075500567235},{"source":12,"target":13,"weight":0.40622804770087395},{"source":0,"target":11,"weight":0.24806004723386413},{"source":11,"target":12,"weight":0.8035303834469385}]}');
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) {
return d.id;
}))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) {
return Math.sqrt(d.weight);
})
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("foo")
.data(graph.nodes)
.enter().append("g");
var circles = node.append("circle")
.attr("r", 5)
.attr("fill", function(d) {
return d3.color(d.color);
})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var label = node.append("text")
.attr("class", "label")
.text("test");
node.append("title")
.text(function(d) {
return d.id;
});
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked() {
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;
});
node
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
})
}
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="400"></svg>

Force-Dragging-Graph D3.js error

I was able to replicate one of Mike Bostock's Force Dragging example from his blog
However I am not sure why when I try to simulate it in my own style, it crashes.
Here's a working code, mimicking exactly's Bostock's code, except using a different JSON data
Here's the link to JSON data
Codepen - Working
Here's my own attempt :
Codepen - Not Working
$( document ).ready(function(){
const w = 1000;
const h = 700;
const margin = {
top: 90,
bottom: 90,
left: 90,
right: 90
}
function title(){
}
function render(data){
const width = w - (margin.left + margin.right);
const height = h - (margin.up + margin.down);
let svg = d3.select("#canvas")
.append("svg")
.attr("id","chart")
.attr("width", w)
.attr("height", h)
let chart = svg.append("g")
.classed("display", true)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
let simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d,i) {
return i;
}))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2))
let link = chart.append("g")
.classed("links",true)
.selectAll("line")
.data(data.links)
.enter()
.append("line")
let node = chart.append("g")
.classed("nodes",true)
.selectAll("circle")
.data(data.nodes)
.enter()
.append("circle")
.attr("r", 2.5)
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
);
node.append("title")
.text(function(d) { return d.country; });
simulation
.nodes(data.nodes)
.on("tick", ticked);
simulation.force("link")
.links(data.links);
//functions provided by D3.js
//
function ticked() {
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;
});
node
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
}
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
}
const url = 'https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json';
$.ajax({
type: "GET",
dataType: "json",
url: url,
beforeSend: ()=>{
},
complete: () =>{
},
success: data =>{
render(data)
},
fail: () =>{
console.log('failure!')
},
error: () =>{
}
});
});

Change the variable names up and down used for height calculation to top and bottom. Height attribute was set NaN due to this typo in margin variables.
Change this line-
const height = h - (margin.up + margin.down);
to
const height = h - (margin.top + margin.bottom);
Updated codepen: http://codepen.io/anon/pen/XjVyGx

D3.js - Labeling nodes with image in Force-Layout

I have the following code in my Codepen that's able to render the sprites flags (from CSS), yet it's not in the position where it should be based on the nodes's position.
In fact, I am able to drag the nodes from the flags sprites from the top!
Looking at some console.logs, it seems that d.x and d.y position from function ticked() is not passing when the nodes are called.
I am not sure how to fix this issue
const width = w - (margin.left + margin.right);
const height = h - (margin.top + margin.bottom);
let flagNodes = d3.select("#canvas")
.append("div")
.classed("flag-nodes",true)
let svg = d3.select("#canvas")
.append("svg")
.attr("id","chart")
.attr("width", w)
.attr("height", h)
let chart = svg.append("g")
.classed("display", true)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
let simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d,i) {
return i;
}))
.force("charge", d3.forceManyBody().strength(-4))
.force("center", d3.forceCenter(width/2, height/2))
let node = flagNodes.selectAll(".flag-nodes")
.data(data.nodes)
.enter()
.append("div")
.attr("class", function(d,i){
return `flag flag-${d.code}`
})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
)
let link = chart.append("g")
.classed("links",true)
.selectAll("line")
.data(data.links)
.enter()
.append("line")
node.append("title")
.text(function(d) { return d.country; });
simulation
.nodes(data.nodes)
.on("tick", ticked);
simulation.force("link")
.links(data.links);
//functions provided by D3.js
//
function ticked() {
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;});
node
.style("left", function(d) {return d.x})
.style("top", function(d) {return d.y});
}
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
Codepen

You are super close! This took me quite a while to figure out.
I ended up creating a flag folder filled with country pngs in my project directory. Then dynamically loaded them using the country code.
Here is how I solved the problem:
const node = svg.selectAll(".flag")
.data(data.nodes)
.enter().append("image")
.attr("xlink:href", d => require(`./flag/${d.code}.png`))
.attr("width", radius)
.attr("height", radius)
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))