Version 1.0.0
Simple encapsulation of D3 to allow drawing within a defined panel in an HTML page.
Start by installing the built JavaScript module:
bash> bower install angular-bz-d3-panel
Then add the module to the HTML file:
... <script src="bower_modules/angular-bz-d3-panel/bzD3Panel.min.js" type="text/javascript"></script> ...
Then use the HTML panel wherever you want to add a drawing:
...
<body ng-app="application">
...
<div ng-controller="PanelController">
<bz-d3-panel data-content="panelData" data-render="renderPanel" data-redraw="redrawPanel">
<p>
This panel includes a drawing that has this caption.
</p>
</bz-d3-panel>
</div>
...
</body>
...
Where the panel controller scope includes the 'panelData' variable containing the data to be drawn, and the 'renderPanel' function that uses D3.js to draw that data.
module("application",["bzD3"])
.controller("PanelController",[ function() {
$scope.panelData = { data: [ 15, 25, 35 ] };
$scope.renderPanel = function(d3,svg,data) {
svg.style('background-color','ivory');
}
$scope.redrawPanel = function(d3,svg,data) {
var circles = svg.selectAll("circle")
.data(data)
.enter();
circles.append("circle")
.style("fill", "red")
.style("stroke", "black")
.style("stroke-width", "2")
.attr("cx",function(d,i) {return 2*40*(i+1) + d;})
.attr("cy",40)
.attr("r",function(d) {return d;});
}
}])
bash> grunt serve
bash> grunt test
bash> grunt bower bash> git push origin master