Skip to content

Instantly share code, notes, and snippets.

@auser
Last active August 23, 2018 12:31
Show Gist options
  • Save auser/6590929 to your computer and use it in GitHub Desktop.
Save auser/6590929 to your computer and use it in GitHub Desktop.
angular.module('d3', [])
.factory('d3Service', ['$document', '$window', '$q', '$rootScope',
function($document, $window, $q, $rootScope) {
var d = $q.defer(),
d3service = {
d3: function() { return d.promise; }
};
function onScriptLoad() {
// Load client in the browser
$rootScope.$apply(function() { d.resolve($window.d3); });
}
var scriptTag = $document[0].createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.async = true;
scriptTag.src = 'http://d3js.org/d3.v3.min.js';
scriptTag.onreadystatechange = function () {
if (this.readyState == 'complete') onScriptLoad();
}
scriptTag.onload = onScriptLoad;
var s = $document[0].getElementsByTagName('body')[0];
s.appendChild(scriptTag);
return d3service;
}]);
<div id="app" ng-app="panesApp">
<div ng-controller="NestedViewsController">
<h2>Multiple named views</h2>
<div ui-view></div>
</div>
</div>
<script type="text/javascript" src="/js/vendor/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/js/posts/d3.js"></script>
<script type="text/javascript">
angular.module('panesApp', [
'd3',
'ui.router',
'panesApp.controllers'
])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('parent', {
abstract: true,
template: '<div class="row">\
<div class="large-4 small-4 columns" ui-view="data"></div>\
<div class="large-8 small-8 columns" ui-view="d3"></div>\
</div>\
<style type="text/css"> .chart rect {stroke:white;}</style>'
})
.state('parent.home', {
url: '/',
views: {
data: {
template: '<table>\
<thead>\
<tr><th colspan="2">Girls to boys percent</th></tr>\
</thead>\
<tbody>\
<tr ng-repeat="obj in data">\
<td ng-bind="data[$index].name"></td>\
<td><input ng-model="data[$index].percent" type="number" min="1" placeholder="Percent" /></td>\
</tr>\
</tbody></table>'
},
d3: {
template: '<div id="d3"></div>',
controller: function($scope, d3Service) {
d3Service.d3().then(function(d3) {
var width = 400,
height = 150,
color = d3.scale.category20();
var chart = d3.select(
document.getElementById("d3")
).append("svg")
.attr("class", "chart")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(10,15)");
$scope.$watch('data', function(newData) {
var data = [];
angular.forEach(newData, function(d) {
data.push(d.percent);
});
$scope.render(data);
}, true);
$scope.render = function(data) {
chart.selectAll('*').remove();
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range(["0px", width + "px"]);
var y = d3.scale.ordinal()
.domain(data)
.rangeBands([0, 120]);
chart.selectAll("line")
.data(x.ticks(10))
.enter().append("line")
.attr("x1", x)
.attr("x2", x)
.attr("y1", 0)
.attr("y2", 120)
.style("stroke", "#ccc");
chart.selectAll(".rule")
.data(x.ticks(10))
.enter().append("text")
.attr("class", "rule")
.attr("x", x)
.attr("y", 0)
.attr("dy", -3)
.attr("text-anchor", "middle")
.text(String);
chart.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("y", y)
.attr("width", x)
.attr("height", y.rangeBand())
.attr('fill', function(d) {
return color(d);
});
chart.selectAll(".bar")
.data(data)
.enter().append("text")
.attr("class", "bar")
.attr("x", x)
.attr("y", function(d) { return y(d) + y.rangeBand() / 2; })
.attr("dx", -12)
.attr("dy", ".35em")
.attr("text-anchor", "end")
.text(String);
chart.append("line")
.attr("y1", 0)
.attr("y2", 120)
.style("stroke", "#000");
};
$scope.render();
});
}
}
}
});
}]);
angular.module('panesApp.controllers', [])
.controller('NestedViewsController', ['$scope', '$state', function($scope, $state) {
$scope.data = [
{name: "Chrome", percent:20},
{name: "Firefox", percent:30},
{name: "Safari", percent:60}
];
$scope.signup = function() {
}
}]);
</script>
@boxxxie
Copy link

boxxxie commented Nov 26, 2013

it would be really graet if you had a jsfiddle of this on http://www.ng-newsletter.com/posts/angular-ui-router.html instead of linking to this gist. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment