You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
126 lines
3.6 KiB
HTML
126 lines
3.6 KiB
HTML
5 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<title>d3 graph</title>
|
||
|
|
<script src="https://d3js.org/d3.v4.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="my_dataviz"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// set the dimensions and margins of the graph
|
||
|
|
var margin = { top: 0, right: 0, bottom: 0, left: 0 },
|
||
|
|
width = 2000 - margin.left - margin.right,
|
||
|
|
height = 2000 - margin.top - margin.bottom;
|
||
|
|
|
||
|
|
// append the svg object to the body of the page
|
||
|
|
var svg = d3
|
||
|
|
.select("#my_dataviz")
|
||
|
|
.append("svg")
|
||
|
|
.attr("width", width + margin.left + margin.right)
|
||
|
|
.attr("height", height + margin.top + margin.bottom)
|
||
|
|
.append("g")
|
||
|
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||
|
|
|
||
|
|
d3.json("data_network.json", function(data) {
|
||
|
|
// Initialize the links
|
||
|
|
var link = svg
|
||
|
|
.selectAll("line")
|
||
|
|
.data(data.links)
|
||
|
|
.enter()
|
||
|
|
.append("line")
|
||
|
|
.style("stroke", "#aaa");
|
||
|
|
|
||
|
|
// Initialize the nodes
|
||
|
|
var node = svg
|
||
|
|
.selectAll("circle")
|
||
|
|
.data(data.nodes)
|
||
|
|
.enter()
|
||
|
|
.append("circle")
|
||
|
|
.attr("r", 5)
|
||
|
|
.style("fill", "black");
|
||
|
|
|
||
|
|
var text = svg
|
||
|
|
.selectAll("text")
|
||
|
|
.data(data.nodes)
|
||
|
|
.enter()
|
||
|
|
.append("text")
|
||
|
|
.text(function(d) {
|
||
|
|
return d.name;
|
||
|
|
})
|
||
|
|
.style("font-size", "18px")
|
||
|
|
.style("color", "blue");
|
||
|
|
|
||
|
|
// Let's list the force we wanna apply on the network
|
||
|
|
var simulation = d3
|
||
|
|
.forceSimulation(data.nodes) // Force algorithm is applied to data.nodes
|
||
|
|
.force(
|
||
|
|
"link",
|
||
|
|
d3
|
||
|
|
.forceLink() // This force provides links between nodes
|
||
|
|
.id(function(d) {
|
||
|
|
return d.id;
|
||
|
|
}) // This provide the id of a node
|
||
|
|
.links(data.links) // and this the list of links
|
||
|
|
)
|
||
|
|
.force("charge", d3.forceManyBody().strength(-500)) // This adds repulsion between nodes. Play with the -400 for the repulsion strength
|
||
|
|
.force("center", d3.forceCenter(width / 2, height / 2)) // This force attracts nodes to the center of the svg area
|
||
|
|
.on("end", ticked);
|
||
|
|
|
||
|
|
var dragDrop = d3
|
||
|
|
.drag()
|
||
|
|
.on("start", function(node) {
|
||
|
|
node.cx = node.x;
|
||
|
|
node.cy = node.y;
|
||
|
|
})
|
||
|
|
.on("drag", function(node) {
|
||
|
|
simulation.alphaTarget(0.7).restart();
|
||
|
|
node.cx = d3.event.x;
|
||
|
|
node.cy = d3.event.y;
|
||
|
|
})
|
||
|
|
.on("end", function(node) {
|
||
|
|
if (!d3.event.active) {
|
||
|
|
simulation.alphaTarget(0);
|
||
|
|
}
|
||
|
|
node.cx = null;
|
||
|
|
node.cy = null;
|
||
|
|
});
|
||
|
|
|
||
|
|
// This function is run at each iteration of the force algorithm, updating the nodes position.
|
||
|
|
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 + 6;
|
||
|
|
})
|
||
|
|
.attr("cy", function(d) {
|
||
|
|
return d.y - 6;
|
||
|
|
});
|
||
|
|
|
||
|
|
text
|
||
|
|
.attr("dx", function(d) {
|
||
|
|
return d.x + 6;
|
||
|
|
})
|
||
|
|
.attr("dy", function(d) {
|
||
|
|
return d.y - 6;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|