I've been attempting to enhance my Bubble chart graph created with D3.js by incorporating AngularJS, but I'm facing some difficulties. Despite going through this tutorial, nothing seems to be working as expected.
Below is the code I have written:
var d3DemoApp = angular.module('d3DemoApp', []);
// controller logic
d3DemoApp.controller('AppCtrl', function AppCtrl ($scope) {
$scope.data = './data.json';
$scope.getCommitData = function () {
$http({
method: 'GET',
url: $scope.data
}).
success(function (data) {
// assign data to the scope
$scope.data = data;
// clear any error messages
$scope.error = '';
}).
error(function (data, status) {
$scope.error = 'Error: ' + status;
});
};
// retrieve commit data immediately
$scope.getCommitData();
});
d3DemoApp.directive('ghVisualization', function () {
return {
restrict: 'E',
scope: {
val: '=',
grouped: '='
},
link: function (scope, element, attrs) {
var diameter = 900,
format = d3.format(",d"),
color = d3.scale.category20c();
var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.value(function(d) { return (d.value+1); })
.padding(1.5);
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
scope.data = getCommitData();
var node = svg.selectAll(".node")
.data(bubble.nodes(classes($scope.data))
.filter(function (d) {
return !d.children;
}))
.enter().append("g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
node.append("title")
.text(function (d) {
return d.className + ": " + format(d.value);
});
node.append("circle")
.attr("r", function (d) {
return d.r;
})
.style("opacity", "0")
.style("fill", function (d) {
return "red";
});
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function (d) {
return d.className.substring(0, d.r / 3);
})
.style("opacity", "0");
node.on("click", click);
function click(d) {
alert("Click Event Triggered!");
document.getElementById('myDiv').value = d.value;
};
// Return a hierarchy containing all leaf nodes under the root.
function classes(root) {
var classes = [];
function recurse(name, node) {
if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
else classes.push({value: name, className: node.name, value: node.size, size: node.size});
}
recurse(null, root);
return {children: classes};
}
d3.select(self.frameElement).style("height", diameter + "px");
}
}
});
I would greatly appreciate your assistance as I am quite stuck... Thank you very much!