var svg = d3.select("svg"), width = +svg.attr("width"),
height = +svg.attr("height");
var simulation = d3
.forceSimulation()
.force("charge", d3.forceManyBody().strength(-200))
.force(
"link",
d3
.forceLink()
.id(function (d) {
return d.node_1;
})
.distance(40)
)
.force("x", d3.forceX(width / 2))
.force("y", d3.forceY(height / 2))
.on("tick", ticked);
var link = svg.selectAll(".link"),
node = svg.selectAll(".node");
d3.csv("node.csv").then(function (data) {
graph = { nodes: [], links: [] };
data.forEach(function (d) {
graph.nodes.push({ node_1: d.node_1 });
graph.nodes.push({ node_2: d.node_2 });
graph.links.push({
source: d.node_1,
target: d.node_2,
value: +d.amount,
});
});
simulation.nodes(graph.nodes);
simulation.force("link").links(graph.links);
link = link
.data(graph.links)
.enter()
.append("line")
.attr("class", "link");
node = node
.data(graph.nodes)
.enter()
.append("circle")
.attr("class", "node")
.attr("r", 6)
.style("fill", function (d) {
return d.node_1;
});
});
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;
});
}
Could you help me find out what it 's wrong with it? I'm fairly new to d3 and javascript in general :)