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

4 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>