Question

由于我对nvD3比较陌生，我对我遇到的不同的nvD3代码符号感到困惑，任何人都可以帮助我更好地理解它。

nvD3代码示例如下：

Aprroach#1:

html :
<div id="chart">
  <svg></svg>
</div>

script :

nv.addGraph(function() {
  var chart = nv.models.lineChart()
    .useInteractiveGuideline(true)
    ;

  chart.xAxis
    .axisLabel('Time (ms)')
    .tickFormat(d3.format(',r'))
    ;

  chart.yAxis
    .axisLabel('Voltage (v)')
    .tickFormat(d3.format('.02f'))
    ;
  var data=sinandcos();
  d3.select('#chart svg')
    .datum(sinandcos())
    .transition().duration(500)
    .call(chart)
    .selectAll('.nv-y text')
    .attr('x',-15)
    ;

  return chart;
});

Approach #2 :

html :
<body ng-controller="MainCtrl">

   <nvd3 options="options" data="data"></nvd3>

  </body>

script :

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

app.controller('MainCtrl', function($scope, $compile) {

  $scope.options = {
            chart: {
                 type: 'lineChart',             
                height: 450,
                margin : {
                "top": 20,
                "right": 20,
                "bottom": 40,
                "left": 55
              },
                x: function(d){ return d[0]; },
                y: function(d){ return d[1]; },
                useVoronoi: false,
                clipEdge: true,
                transitionDuration: 2000,
                useInteractiveGuideline: true,
                xAxis: {
                    tickFormat: function(d) {
                        return d3.time.format('%x')(new Date(d))
                    },
                    showMaxMin: false
                },
                yAxis: {
                    tickFormat: function(d){
                        return d3.format('.02f')(d);
                    }
                }
            }
        };

        $scope.data = [....] 

});

在方法＃1中，我没有看到任何角度js控制器概念，在方法＃2中，我没有看到如下图所示的图表来绘制图表 d3.select（＆＃39; #chart svg＆＃39;） .datum（sinandcos（）） .transition（）。持续时间（500） .CALL（图表） .selectAll（＆＃39; .nv-y text＆＃39;） .attr（＆＃39; X＆＃39;， - 15）

在方法＃2中，如果我想在一个页面中添加4个图表，如下所示，我该怎么办？任何人都可以为此指出一些参考代码吗？

                   chart1#    chart2#
                   Chart3#    chart4#

Answer 1

我相信你会把nvD3库（＃1）与构建在nvD3库（＃2）之上的Angular-nvD3这样的库混淆。

要向页面添加4个图表，您可以在所需的排列中创建4个容器，然后为每个容器重复nv.addGraph以添加图形。

方法＃1看起来像：

html :
<div id="chart1">
  <svg></svg>
</div>

<div id="chart2">
  <svg></svg>
</div>

<div id="chart3">
  <svg></svg>
</div>

<div id="chart4">
  <svg></svg>
</div>


script :

nv.addGraph(function() {
  ...
  d3.select('#chart1 svg')
  ...
}

nv.addGraph(function() {
  ...
  d3.select('#chart2 svg')
  ...
}

nv.addGraph(function() {
  ...
  d3.select('#chart3 svg')
  ...
}

nv.addGraph(function() {
  ...
  d3.select('#chart4 svg')
  ...
}

不同的nvD3方法

1 个答案: