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="//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>