My goal is to develop a force directed graph using AngularJS. Despite having already coded my application in AngularJS, I am struggling with integrating my JSON data into $scope.data and making the code more efficient.
var app = angular.module("chartApp", []);
app.directive('graph', function() {
var graphLink = function(scope, element) {
var width = 960,
height = 500;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select(element[0]).append("svg") // attach d3 to directive element
.attr("width", width)
.attr("height", height);
d3.json("js/miserables", function(error, graph) {
if (error) throw error;
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link") // there might be a more angular way to do this...
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function (d) {
return Math.sqrt(d.value);
});
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function (d) {
return color(d.group);
})
.call(force.drag);
node.append("title")
.text(function (d) {
return d.name;
});
force.on("tick", function () {
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;
});
});
return {
link: graphLink, // pass in your link function here
scope: {
data: '=' // pass in your data as an attribute
// this makes this reusable, and you can redraw if the data changes
}
};
})}});
JSON Data
{
// Insert your JSON data here
}