nvd3作为角度服务答案

【问题标题】：nvd3 as service in angularnvd3作为角度服务
【发布时间】：2013-11-21 15:01:39
【问题描述】：

我正在尝试创建一个 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());
}

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

【问题讨论】：

标签： javascript angularjs d3.js nvd3.js

【解决方案1】：

nvd3 有一个角度指令

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

你可以看看。

【讨论】：

【解决方案2】：

我在过去在同一页面上渲染多个 nvd3 图表时遇到过类似的问题（使用 rails 而不是 Angular）问题是您不能在同一页面上拥有多个图表，除非您将它们全部存储在一个数组中.请参阅This Stackoverflow question of mine，您可以为其扩展逻辑。

我通过查看nvd3.org 上的示例页面找到了这个解决方案，在那里我看到他们在一个数组中有多个图表。然而，在他们的情况下，他们能够按名称引用图表。你只需要动态地做。使用 Angular 的双向绑定可能会更容易一些。

您需要在 Angular 中执行类似的操作，在服务中维护一组图表对象。这应该不是问题，因为 Angular 服务是单例的。

附：您是否考虑过在 github 上使用 angularjs-nvd3-directives 项目之类的东西？可能已经用隔离范围等做了你需要的事情。#justathought

祝你好运。

【讨论】：