Backbone.D3View
A drop-in replacement for Backbone.View that uses only D3 DOM methods for element selection and event delegation. It has no dependency on jQuery.
NOTE: Backbone.D3View relies on at least version 1.2.0 of Backbone. Backbone 1.1.2 is not compatible with Backbone.D3View.
To Use:
Load Backbone.D3View with your favorite module loader or add as a script tag after you have loaded Backbone and D3 in the page. Wherever you had previously inherited from Backbone.View, you will now inherit from Backbone.D3View.
var MyView = BackboneD3View;
As an alternative, you may extend an existing View's prototype to use D3 methods, or even replace Backbone.View itself:
_; var MyView = BackboneView;
Features:
Delegation:
var view = el: '#my-element';view;
Undelegation with event names or listeners,
view;view;
View-scoped element finding that returns a NodeList:
view0classList; // for one matched element// for multiple matched elements_;var fields = _;
View-scoped element finding that returns a d3 selector:
var Graph = BackboneD3View;
Direct reference to the D3 selection:
var Graph = BackboneD3View;
Requirements:
- A browser that supports D3.
Running tests:
The test suite includes the original Backbone.View QUnit conformance tests as well as a suite of Backbone.D3View-specific tests in mocha.
Notes:
- The
$el
property no longer exists on Views. Useel
instead. You may also use thed3el
property for the reference to the D3 selection. - The
$
method returns a NodeList instead of a jQuery context. You can iterate over either using_.each
.