javascript - nvd3 作为 Angular 服务

Question

我正在尝试创建一个 SPA，其中每个页面都有不同的折线图集。 我创建了一个图形服务。

dashboard.factory('graphService', function() {

function drawGraph(chart, element, data) {
    nv.addGraph(function() {
        chart = nv.models.lineChart()
            .x(function(d) { return d.x })
            .y(function(d) { return d.display ? d.display.y : d.y });

        chart.lines.scatter.useVoronoi(false);

        var xScale = d3.scale.linear()
            .domain([0, d3.max(data, function(d) { return d[0]; })]);

        chart.xAxis
            .axisLabel('Time')
            .tickFormat(function(d) {
                return d3.time.format("%m-%d %H:%M:%S")(new Date(d))
            })
            .scale(xScale)
            .orient("bottom");

        chart.yAxis
            .axisLabel('Rate')
            .domain([0, 20])
            .tickFormat(d3.format(',r'));

        d3.select(element)
            .datum(data)
            .transition().duration(500)
            .call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
    });
}

 return 
 {
    drawGraph: drawGraph
 };
});

但是在第二页上，我看到第一页上的图表，有时我看不到

function refreshAcs() {

    graphService.drawGraph(that.acsChart, '#chartAcs svg', dataService.getAcsData());
}

我怎样才能做到这一点？我是否需要添加回调来获取图表并每次都传递它？因为函数是生成器

Answer 1

nvd3 有一个 Angular Directive(指令)

http://cmaurer.github.io/angularjs-nvd3-directives

你可以看一下。