Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
A Pen by Erick Mendoza.
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">
<bars-chart chart-data="myData" ></bars-chart>
</div>
angular.module('myApp', []).
//camel cased directive name
//in your HTML, this will be named as bars-chart
directive('barsChart', function ($parse) {
//explicitly creating a directive definition variable
//this may look verbose but is good for clarification purposes
//in real life you'd want to simply return the object {...}
var directiveDefinitionObject = {
//We restrict its use to an element
//as usually <bars-chart> is semantically
//more understandable
restrict: 'E',
//this is important,
//we don't want to overwrite our directive declaration
//in the HTML mark-up
replace: false,
//our data source would be an array
//passed thru chart-data attribute
scope: {data: '=chartData'},
link: function (scope, element, attrs) {
//in D3, any selection[0] contains the group
//selection[0][0] is the DOM node
//but we won't need that this time
var chart = d3.select(element[0]);
//to our original directive markup bars-chart
//we add a div with out chart stling and bind each
//data entry to the chart
chart.append("div").attr("class", "chart")
.selectAll('div')
.data(scope.data).enter().append("div")
.transition().ease("elastic")
.style("width", function(d) { return d + "%"; })
.text(function(d) { return d + "%"; });
//a little of magic: setting it's width based
//on the data value (d)
//and text all with a smooth transition
}
};
return directiveDefinitionObject;
});
function Ctrl($scope) {
$scope.myData = [10,20,30,40,60];
}
.chart {
background: #eee;
padding: 3px;
}
.chart div {
width: 0;
transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
}
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 5px;
color: white;
box-shadow: 2px 2px 2px #666;
}

Mustafa Özcan

Kişisel Blog makalelerimi SEO konusundaki deneyimleri paylaştığım blogum.Fırsatları ayağınıza getiren mustafa ozcan blog kişisel temalı yazılar ile gündemde yer alan güncel yazıları sizlere sunma fırsatı ile.

Good post!

Helpful example! I nonetheless have a question: You inject $parse but do not use it afterwards. Is this on purpose?

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