I'm new to D3/nvd3. Trying to show "outside" labels with lines, similar to Bostock's pie chart here http://bl.ocks.org/dbuezas/9306799. I don't know how to approach the labels lines to show up like that with nvd3. The pie and labels are appearing correctly! Any help on how to show label lines would be highly appreciated! The approach currently I am following is very similar to the basic example provided by nvd3 (http://plnkr.co/edit/OlROrZ?p=preview).
app.js
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'pieChart',
height: 450,
donut: true,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
labelsOutside: true,
pie: {
startAngle: function(d) { return d.startAngle/2 -Math.PI/2 },
endAngle: function(d) { return d.endAngle/2 -Math.PI/2 }
},
duration: 500,
legend: {
margin: {
top: 5,
right: 70,
bottom: 5,
left: 0
}
}
}
};
$scope.data = [
{
key: "One",
y: 5
},
{
key: "Two",
y: 2
},
{
key: "Three",
y: 9
},
{
key: "Four",
y: 7
},
{
key: "Five",
y: 4
},
{
key: "Six",
y: 3
},
{
key: "Seven",
y: .5
}
];
});
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Donut Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.5/dist/angular-nvd3.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<nvd3 options="options" data="data"></nvd3>
</body>
</html>