I recently created my first force-oriented graph using the v3 library, but now I need to create the same graph using the D3 version 4 library, but the methods have changed a lot in v4, and now I get an error with all the force () / drag methods () of 3 that do not exist now in v4.
My schedule is based on the following layout - http://www.ourd3js.com/wordpress/?p=606
Is there a repository of samples that were created in the v4 d3 library somewhere where I can take a look and find out a few functions that I can replace for this particular diagram?
EDIT:
My current code looks like this, but I can’t completely convert it, for example, node links are very close, sometimes the text of links and nodes overlaps.
<svg width="960" height="600"></svg>
Javascript Code :
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var graph = root;
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
var width = x;
var height = y;
var img_w = 24;
var img_h = 24;
var k = Math.sqrt(root.nodes.length / (width * height));
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody().strength(-5 / k))
.force("center", d3.forceCenter(width / 2, height / 2));
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line");
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("image")
.attr("width",img_w)
.attr("height",img_h)
.attr("xlink:href",function(d){
return d.image;
})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var links_text = svg.selectAll(".linetext")
.data(graph.links)
.enter()
.append("text")
.attr("class","linetext slds-text-heading--small")
.attr("text-anchor", "middle")
.text(function(d){
return '['+d.relation+']';
});
var nodes_text = svg.selectAll(".nodetext")
.data(graph.nodes)
.enter()
.append("text")
.attr("class","nodetext slds-text-heading--label")
.attr("text-anchor", "middle")
.attr("dx",-20)
.attr("dy",20)
.text(function(d){
return (d.subname!=''?(d.subname+': '):'')+d.name;
});
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; });
links_text
.attr("x",function(d){ return (d.source.x + d.target.x) / 2; })
.attr("y",function(d){ return (d.source.y + d.target.y) / 2; });
node
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; });
nodes_text
.attr("x",function(d){ return d.x + 20 })
.attr("y",function(d){ return d.y + img_w/2; });
}
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;
}
JSON Data String:
var root = {
"nodes" : [ {
"subname" : "",
"name" : "Telco Power Case",
"image" : "/node32.png",
"id" : 0
}, {
"subname" : "Contact",
"name" : "Suman Kumar",
"image" : "/subnode32.png.png",
"id" : 1
}, {
"subname" : "Contact",
"name" : "Karla Samuel",
"image" : "/subnode32.png.png",
"id" : 2
}, {
"subname" : "Account",
"name" : "Signa Tech",
"image" : "/subnode32.png.png",
"id" : 3
}, {
"subname" : "",
"name" : "Maven Case",
"image" : "/node32.png",
"id" : 4
}, {
"subname" : "",
"name" : "Delta Case",
"image" : "/node32.png",
"id" : 5
}, {
"subname" : "Contact",
"name" : "T Browney",
"image" : "/subnode32.png.png",
"id" : 6
}, {
"subname" : "Account",
"name" : "Presto",
"image" : "/subnode32.png.png",
"id" : 7
}, {
"subname" : "Contact",
"name" : "Bob Tannenbaum",
"image" : "/subnode32.png.png",
"id" : 8
}, {
"subname" : "Account",
"name" : "Tesla Power",
"image" : "/subnode32.png.png",
"id" : 9
} ],
"links" : [ {
"target" : 1,
"source" : 0,
"relation" : "Trainee"
}, {
"target" : 2,
"source" : 0,
"relation" : "Manager"
}, {
"target" : 3,
"source" : 0,
"relation" : "Technology"
}, {
"target" : 1,
"source" : 0,
"relation" : "Trainee"
}, {
"target" : 2,
"source" : 0,
"relation" : "Manager"
}, {
"target" : 3,
"source" : 0,
"relation" : "Technology"
}, {
"target" : 2,
"source" : 4,
"relation" : "Expert"
}, {
"target" : 2,
"source" : 5,
"relation" : "Expert"
}, {
"target" : 1,
"source" : 5,
"relation" : "Expert"
}, {
"target" : 6,
"source" : 5,
"relation" : "Trainee"
}, {
"target" : 7,
"source" : 5,
"relation" : "Technology;New Firm"
}, {
"target" : 8,
"source" : 4,
"relation" : "Expert"
}, {
"target" : 9,
"source" : 4,
"relation" : "New Firm"
}, {
"target" : 8,
"source" : 4,
"relation" : "Expert"
}, {
"target" : 9,
"source" : 4,
"relation" : "New Firm"
}, {
"target" : 6,
"source" : 5,
"relation" : "Trainee"
}, {
"target" : 7,
"source" : 5,
"relation" : "Technology;New Firm"
} ]
};