An example of how to create your own sparkline dirctive in AngularJS without replace and transclude
see: https://bl.ocks.org/vicapow/9904319 for an alterative example that instead uses replace and transclude to allow the sparkline styles to be set on the element.
This is a code excerpt from the book D3 on Angular. http://leanpub.com/d3angularjs
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <style> | |
| html, body{ | |
| width: 100%; | |
| height: 100%; | |
| font-size: 1.2em; | |
| font-family: helvetica; | |
| } | |
| sl { | |
| display: inline-block; | |
| width: 10em; | |
| vertical-align: middle; | |
| stroke: black; | |
| stroke-width: 1; | |
| } | |
| sl path{ | |
| fill: none; | |
| } | |
| sl circle{ | |
| fill: red; | |
| } | |
| .large{ | |
| margin: 0; | |
| font-size: 3em; | |
| } | |
| </style> | |
| </head> | |
| <body ng-app="app"> | |
| <p>so this is a spark line <sl style="width:2em">[10,20,30,40,20,50,80]</sl>. Pretty cool, right?</p> | |
| <p>here's another <sl style="width:2em" r="1">[10,20,30]</sl></p> | |
| <p>here's a longer example <sl r="1" style="width:5em">[20,24,20,27,29,50,90]</sl></p> | |
| <p>an even longer example <sl r="1">[20,24,20,500,29,50,90, 20, 10, 40]</sl></p> | |
| <p> lets look at a few in a row.</p> | |
| <p> | |
| <sl r="1">[20,24,20,500,29,50,90, 20, 10, 40]</sl><br> | |
| <sl r="1">[20,24,30,400,29,50,90, 20, 10, 40]</sl><br> | |
| <sl r="1">[20,24,25,300,29,50,90, 20, 10, 40]</sl><br> | |
| <sl r="1">[20,24,21,200,29,50,90, 20, 10, 40]</sl><br> | |
| <sl r="1">[20,24,23,100,29,50,90, 20, 10, 40]</sl> | |
| </p> | |
| </body> | |
| <script> | |
| var app = angular.module('app', []); | |
| app.directive('sl', function(){ | |
| function link(scope, el, attr){ | |
| el = d3.select(el[0]); | |
| var data = JSON.parse(el.text()); | |
| el.text(''); // remove the data text | |
| var svg = el.append('svg'); | |
| var min = attr.min !== undefined ? +attr.min : d3.min(data); | |
| var max = attr.max !== undefined ? +attr.max : d3.max(data); | |
| var r = attr.r || 0; | |
| var m = r; | |
| var w = el.node().clientWidth; | |
| var h = +getComputedStyle(el.node())['font-size'].replace('px',''); | |
| svg.attr({width: w, height: h}); | |
| var x = d3.scale.linear().domain([0, data.length - 1]).range([m, w - m]); | |
| var y = d3.scale.linear().domain([min, max]).range([h - m, m]); | |
| var lines = svg.append('path').data(data) | |
| .attr('d', 'M' + data.map(function(d, i){ return [x(i),y(d)] }).join('L')); | |
| var circles = svg.selectAll('circle').data(data).enter().append('circle') | |
| .attr('r', r) | |
| .attr('cx', function(d, i){ return x(i) }) | |
| .attr('cy', function(d){ return y(d) }); | |
| } | |
| return { link: link, restrict: 'E' }; | |
| }); | |
| </script> | |
| </html> |