无法使用D3和Angularjs-nvd3-1指令在一个页面上显示多个图形

我使用NVD3和Angularjs-NVD3-Directions的angular指令。我创建一个图形没有问题，但只要我尝试在屏幕上显示两个图形，只有饼图会显示出来

HTML

---

问题实际上是数据长度不同。系列2的数据元素比其他系列少。如果您添加数据，或者完全删除该系列，它将起作用

---

看一看。

这可能完全关闭，但我看到您有两个同级svg视口，但您需要另一个两者通用的svg:。根据文档，id属性应该可以防止这种情况，所以在我看来，它就像Angularjs-nvd3-Directions中的一个bug。

<div>
    <nvd3-pie-chart 
        data="exampleData" 
        id="dashPieGraph" 
        width="400" 
        height="350" 
        x="xFunction()" 
        y="yFunction()" 
        showLegend="true" 
        showLabels="true" 
        labelType="percent" 
        labelThreshold="0.5" 
        pieLabelsOutside="false" 
        donut="true" 
        donutRatio=".65" 
        donutLabelsOutside="true" 
        noData="No data available">
        <svg></svg>
    </nvd3-pie-chart>
</div>


<div>
    <nvd3-stacked-area-chart 
        data="exampleBarData" 
        id="dashBarGraph" 
        showXAxis="true" 
        showYAxis="true" 
        width="550" 
        height="350">
        <svg></svg>
    </nvd3-stacked-area-chart>
</div>

    $scope.awesomeThings = [
        'HTML5 Boilerplate',
        'AngularJS',
        'Karma'
    ];

    $scope.exampleBarData = [{
             "key": "Series 1",
             "values": [ [ 1025409600000 , 0] , [ 1028088000000 , -6.3382185140371] , [ 1030766400000 , -5.9507873460847] , [ 1033358400000 , -11.569146943813] , [ 1036040400000 , -5.4767332317425] , [ 1038632400000 , 0.50794682203014] , [ 1041310800000 , -5.5310285460542] , [ 1043989200000 , -5.7838296963382] , [ 1046408400000 , -7.3249341615649] , [ 1049086800000 , -6.7078630712489] , [ 1051675200000 , 0.44227126150934] , [ 1054353600000 , 7.2481659343222] , [ 1056945600000 , 9.2512381306992] ]
         },
         {
             "key": "Series 2",
             "values": [ [ 1025409600000 , 0] , [ 1028088000000 , 0] , [ 1030766400000 , 0] , [ 1033358400000 , 0] , [ 1036040400000 , 0] , [ 1038632400000 , 0] , [ 1041310800000 , 0] , [ 1043989200000 , 0] , [ 1046408400000 , 0] , [ 1049086800000 , 0] , [ 1051675200000 , 0] , [ 1054353600000 , 0] , [ 1056945600000 , 0] , [ 1059624000000 , 0] , [ 1062302400000 , 0] , [ 1064894400000 , 0] , [ 1067576400000 , 0] , [ 1070168400000 , 0] , [ 1072846800000 , 0] , [ 1075525200000 , -0.049184266875945] ]
         },
         {
             "key": "Series 3",
             "values": [ [ 1025409600000 , 0] , [ 1028088000000 , -6.3382185140371] , [ 1030766400000 , -5.9507873460847] , [ 1033358400000 , -11.569146943813] , [ 1036040400000 , -5.4767332317425] , [ 1038632400000 , 0.50794682203014] , [ 1041310800000 , -5.5310285460542] , [ 1043989200000 , -5.7838296963382] , [ 1046408400000 , -7.3249341615649] , [ 1049086800000 , -6.7078630712489] , [ 1051675200000 , 0.44227126150934] , [ 1054353600000 , 7.2481659343222] , [ 1056945600000 , 9.2512381306992] ]
         },
         {
             "key": "Series 4",
             "values": [ [ 1025409600000 , -7.0674410638835] , [ 1028088000000 , -14.663359292964] , [ 1030766400000 , -14.104393060540] , [ 1033358400000 , -23.114477037218] , [ 1036040400000 , -16.774256687841] , [ 1038632400000 , -11.902028464000] , [ 1041310800000 , -16.883038668422] , [ 1043989200000 , -19.104223676831] , [ 1046408400000 , -20.420523282736] , [ 1049086800000 , -19.660555051587] , [ 1051675200000 , -13.106911231646] , [ 1054353600000 , -8.2448460302143] , [ 1056945600000 , -7.0313058730976] ]
    }];        

    $scope.exampleData = [{
        key: "5 Stars",
        y: 25
    }, {
        key: "4 Stars",
        y: 32
    }, {
        key: "3 Stars",
        y: 99
    }, {
        key: "2 Stars",
        y: 120
    }, {
        key: "1 Starsx",
        y: 64
    }];

    $scope.xFunction = function() {
        return function(d) {
            return d.key;
        };
    };

    $scope.yFunction = function() {
        return function(d) {
            return d.y;
        };
    };


    var foo = function() {

        var data = [{
            "app_id": 6968,
            "app_nm": "OrgTree",
            "acrnm_nm": "",
            "app_lfcyc_nm": "Deployed",
            "valid_ind": "Y",
            "DomainAddress": "kevin.com",
            "LongID": " KEVIN P",
            "UserID": "",
            "dq_level": 3,
            "star1": "N",
            "star2": "Y",
            "star3": "N",
            "star4": "N",
            "star5": "N"
        }, {
            "app_id": 9066,
            "app_nm": "Application Profiler ",
            "acrnm_nm": "IAP ",
            "app_lfcyc_nm": "Deployed",
            "valid_ind": "Y",
            "DomainAddress": "kevin.com",
            "LongID": "KEVIN P",
            "UserID": "",
            "dq_level": 4,
            "star1": "Y",
            "star2": "N",
            "star3": "Y",
            "star4": "Y",
            "star5": "Y"
        }, {
            "app_id": 10741,
            "app_nm": "Federal Employee database ",
            "acrnm_nm": "IFED",
            "app_lfcyc_nm": "Deployed",
            "valid_ind": "Y",
            "DomainAddress": "rich.com",
            "LongID": ", RICHARD A (RICH)",
            "UserID": "",
            "dq_level": 3,
            "star1": "N",
            "star2": "N",
            "star3": "N",
            "star4": "N",
            "star5": "N"
        }, {
            "app_id": 10884,
            "app_nm": "Finance Tool",
            "acrnm_nm": "",
            "app_lfcyc_nm": "Being Assembled",
            "valid_ind": "Y",
            "DomainAddress": "rich.com",
            "LongID": "RICHARD A (RICH)",
            "UserID": "",
            "dq_level": 3,
            "star1": "U",
            "star2": "U",
            "star3": "U",
            "star4": "U",
            "star5": "U"
        }];

        var s1 = _.countBy(data, function(d) {
            return d.star1;
        });
        var s2 = _.countBy(data, function(d) {
            return d.star2;
        });
        var s3 = _.countBy(data, function(d) {
            return d.star3;
        });
        var s4 = _.countBy(data, function(d) {
            return d.star4;
        });
        var s5 = _.countBy(data, function(d) {
            return d.star5;
        });


        var tmp = {
            star1: s1,
            star2: s2,
            star3: s3,
            star4: s4,
            star5: s5
        }
        return tmp;
    };