| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <link href="../src/nv.d3.css" rel="stylesheet" type="text/css"> |
| <style> |
| |
| body { |
| overflow-y:scroll; |
| } |
| |
| </style> |
| <body> |
| |
| <svg id="test1"></svg> |
| |
| <script src="../lib/d3.v3.js"></script> |
| <script src="../lib/fisheye.js"></script> |
| <script src="../nv.d3.js"></script> |
| <script src="../src/utils.js"></script> |
| <script src="../src/models/legend.js"></script> |
| <script src="../src/models/scatter.js"></script> |
| <script> |
| |
| |
| //Format A |
| nv.addGraph({ |
| generate: function() { |
| var width = nv.utils.windowSize().width - 40, |
| height = nv.utils.windowSize().height - 40; |
| |
| var chart = nv.models.scatter() |
| .width(width) |
| .height(height) |
| .margin({top: 20, right: 20, bottom: 20, left: 20}) |
| .size(function(d) { return d.z }) |
| .useVoronoi(false) |
| //.interactive(false) |
| |
| |
| d3.select('#test1') |
| .attr('width', width) |
| .attr('height', height) |
| .datum(randomData()) |
| .transition().duration(500) |
| .call(chart); |
| |
| return chart; |
| }, |
| callback: function(graph) { |
| window.onresize = function() { |
| var width = nv.utils.windowSize().width - 40, |
| height = nv.utils.windowSize().height - 40, |
| margin = graph.margin(); |
| |
| |
| if (width < margin.left + margin.right + 20) |
| width = margin.left + margin.right + 20; |
| |
| if (height < margin.top + margin.bottom + 20) |
| height = margin.top + margin.bottom + 20; |
| |
| |
| graph |
| .width(width) |
| .height(height); |
| |
| d3.select('#test1') |
| .attr('width', width) |
| .attr('height', height) |
| .call(graph); |
| |
| }; |
| } |
| }); |
| |
| |
| |
| |
| function randomData() { |
| var data = []; |
| |
| for (i = 0; i < 2; i++) { |
| data.push({ |
| key: 'Group ' + i, |
| values: [] |
| }); |
| |
| for (j = 0; j < 100; j++) { |
| data[i].values.push({x: Math.random(), y: Math.random(), z: Math.random()}); |
| } |
| } |
| |
| return data; |
| } |
| |
| |
| </script> |
