While working on a D3-based angular directive inspired by this code pen
Here is my implementation. Check out the Codepen link
angular.module('myApp', []).
directive('barsChart', function ($parse) {
var directiveDefinitionObject = {
restrict: 'E',
replace: false,
scope: {data: '=chartData'},
link: function (scope, element, attrs) {
var chords, h, strings, w;
w = 32;
h = 32;
strings = ['E', 'B', 'G', 'D', 'A', 'E'];
console.log('----------****',d3.select(element[0]));
d3.select(element[0]).selectAll('div').data(scope.data).enter().append('div').groups
.each(function(chord, c) {
d3.select(this).append('h3').attr({
'class': 'chord-name'
}).text(function(d) {
return d.name;
});
return d3.select(this).append('div').attr({
'class': 'strings'
}).selectAll('div').data(chord.strings).enter().append('div').attr({
'class': 'string'
}).each(function(string, s) {
var _, frets;
d3.select(this).append('strong').attr({
'class': 'string-name'
}).text(function(d, i) {
return strings[s];
});
frets = (function() {
var j, results;
results = [];
for (_ = j = 0; j <= 5; _ = ++j) {
results.push(false);
}
return results;
})();
frets[chord.strings[s]] = true;
console.debug(s, frets);
return d3.select(this).append('span').attr({
'class': 'frets'
}).selectAll('span').data(frets).enter().append('span').attr({
'class': 'fret'
}).append('span').attr({
'class': function(fret, f) {
return fret != false ? 'finger' : 'empty';
}
}).html(function(fret, f) {
return fret != false ? f : '—';
});
});
});
}
};
return directiveDefinitionObject;
});
function Ctrl($scope) {
$scope.chords = [
{
name: 'C',
strings: [0, 1, 0, 2, 3, null]
}, {
name: 'D',
strings: [2, 3, 2, 0, null, null]
}, {
name: 'E',
strings: [0, 0, 1, 2, 2, 0]
}, {
name: 'F',
strings: [1, 1, 2, 3, 3, 1]
}, {
name: 'G',
strings: [3, 3, 0, null, 2, 3]
}, {
name: 'A',
strings: [0, 2, 2, 2, 0, null]
}, {
name: 'B',
strings: [2, 3, 4, 4, 2, null]
}, {
name: 'C#',
strings: [3, 4, 5, 5, 3, null]
}, {
name: 'Bm',
strings: [2, 2, 4, 4, 2, null]
}, {
name: 'Bb',
strings: [1, 3, 3, 3, 1, null]
}
];
}.chord {
float: left;
padding: 1.2em;
margin: .6em 0 0 .6em;
font-family: monospace;
background-color: #F0F0F0;
}
/* CSS styling omitted for brevity */
<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="chords" ></bars-chart>
</div>Although everything seems fine, I encountered an error message stating "accessing each of undefined". Any suggestions?