如何制作带有d3和角度的手风琴？

Question

我正在尝试用D3.js和Angular.js制作手风琴。我已经从几个不同的地方采集了代码，并试图将它拼凑在一起以使它运转起来并没有多少运气。以下是我到目前为止的情况：

<div ng-app="myApp">
    <accordion></accordion>
</div>

var app = angular.module('myApp', []);

app.controller('accordionController', function($scope){
//initiate an array to hold all active tabs
$scope.activeTabs = [];
//check if the tab is active
$scope.isOpenTab = function (tab) {
    //check if this tab is already in the activeTabs array
    if ($scope.activeTabs.indexOf(tab) > -1) {
        //if so, return true
        return true;
    } else {
        //if not, return false
        return false;
    }
}

//function to 'open' a tab
$scope.openTab = function (tab) {
    //check if tab is already open
    if ($scope.isOpenTab(tab)) {
        //if it is, remove it from the activeTabs array
        $scope.activeTabs.splice($scope.activeTabs.indexOf(tab), 1);
    } else {
        //if it's not, add it!
        $scope.activeTabs.push(tab);
    }
}
})

app.directive('accordion', function(){
function link(scope, el){
    d3.select(el[0]).append("div")
        .attr('class', 'accordionContainer')
        .attr('ng-controller', "accordionController");

    var accordion = d3.select(".accordionContainer");

    for (var i = 1; i <=5; i++) {
        var accordionTab = accordion.append("div")
            .attr('class', 'accordionTab');

        accordionTab.append("div")
            .attr('class', 'accordionTabTitle')
            .attr('ng-click', "openTab('tab " + i + "')")
            .text("Tab " + i);

        accordionTab.append("div")
            .attr('class', 'accordionTabContent')
            .attr('ng-click', "isOpenTab('tab " + i + "')")
            .text("Tab " + i + " content goes here!");
    }

}

return {
    link:link,
    restrict: 'E'
}
})

我对D3很新，对Angular来说是全新的。任何帮助将不胜感激。感谢。