angularjs - different nvD3 approaches -
as relatively new nvd3, confused different nvd3 code notations coming across, can 1 help me understand better.
the nvd3 code samples follows:
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) ; homecoming 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){ homecoming d[0]; }, y: function(d){ homecoming d[1]; }, usevoronoi: false, clipedge: true, transitionduration: 2000, useinteractiveguideline: true, xaxis: { tickformat: function(d) { homecoming d3.time.format('%x')(new date(d)) }, showmaxmin: false }, yaxis: { tickformat: function(d){ homecoming d3.format('.02f')(d); } } } }; $scope.data = [....] }); in approach #1, don't see angular js controllers concept , in approach #2, don't see chart drawing calls below draw chart d3.select('#chart svg') .datum(sinandcos()) .transition().duration(500) .call(chart) .selectall('.nv-y text') .attr('x',-15)
in approach#2, if want add together 4 charts in single page, below, how can it? can 1 point reference code this?
chart1# chart2# chart3# chart4#
i believe confusing nvd3 library (#1) library such angular-nvd3 built on top of nvd3 library (#2).
to add together 4 charts page, create 4 containers in arrangement want , repeat nv.addgraph each of them add together graphs.
the approach #1 like:
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') ... } angularjs d3.js nvd3.js
No comments:
Post a Comment