Last active
August 29, 2015 14:02
-
-
Save turboMaCk/34bde8e744f5921be0c4 to your computer and use it in GitHub Desktop.
D3.js Chart Library Boilerplate
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>test</title> | |
| </head> | |
| <body> | |
| <div id="mydiv"></div> | |
| <div id="mydiv2"></div> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| (function() { | |
| // first library's plugin | |
| var first = function(element) { | |
| this.container = element; | |
| } | |
| first.prototype = { | |
| init: function() { | |
| console.log('new first', this.container); | |
| return this; | |
| } | |
| } | |
| // second library's plugin | |
| var second = function(element) { | |
| this.container = element; | |
| } | |
| second.prototype = { | |
| init: function() { | |
| console.log('new second', this.container); | |
| return this; | |
| } | |
| } | |
| // library works with own objects | |
| var _wrap = function(selector) { | |
| this.element = d3.select(selector); | |
| return this; | |
| }; | |
| _wrap.prototype = { | |
| first: function() { | |
| var chart = new first(this.element); | |
| return chart.init(); | |
| }, | |
| second: function() { | |
| var chart = new second(this.element); | |
| return chart.init(); | |
| } | |
| }; | |
| // export to global namespace | |
| window.wrap = function(selector) { | |
| return new _wrap(selector); | |
| }; | |
| })(); | |
| </script> | |
| <script> | |
| (function() { | |
| // Init in page | |
| var a = wrap('#mydiv').first(); | |
| var b = wrap('#mydiv2').second(); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment