Libreria di grafici riutilizzabile e personalizzabile su d3js

Ho iniziato a creare una libreria di diagrammi su d3js usando l'ereditarietà di javascript. Il mio obiettivo è sviluppare componenti grafici riutilizzabili e completamente personalizzabili. Ho letto l'articolo: Verso grafici riutilizzabili Poi, ho esaminato codice sorgente di nvd3 .

NVD3 utilizza il codice della piastra della caldaia in ogni grafico come: copia e incolla le definizioni per larghezza, altezza, margine ecc. MA preferisco usare l'ereditarietà per evitare tale codice della piastra della caldaia. Vorrei proprietà come: dimensioni, assi e funzioni come lo zoom e gli ascoltatori di eventi possono essere riusabili tra tutti i grafici e personalizzabili attraverso qualsiasi istanza (oggetto) del grafico.

Ecco come appare la mia attuale libreria. (Supporta solo il grafico a bolle per ora.)

var BaseChart = function(){
    this.width = 200; 
    this.height = 200;//and others like: margin/ chart title
}

//XYChart inherits from BaseChart
var XYChart = function(){
    //It contains members for axes, axis groups, labels, ticks, domains and ranges
    //Example: One of the members it contains is "this.yAxis"
    this.yAxis = d3.svg.axis().scale(this.scaleY)
            .orient("left")
            .ticks(this.yTickCnt)
            .tickSize(-this.width);
}

//Extends XYChart and adds zooming
var ZoomableXYChart = function(){
    this.zoom = function(){
        this.svg.selectAll(this.dataShape)
            .attr("transform", function(d, i) {
                var translate = that.calculateTranslation(d);
                return "translate(" + translate.x + "," + translate.y + ")";
            });
    }
}

//Extends zoomable XY chart and adds support for drawing shapes on data points
var BubbleChart = function(){
    this.dataShape = "path";

    this.drawChart = function()
    {
        this.prepareChart();//Attaches zooming, draws axes etc.
        var that = this;
        this.svg.selectAll(that.dataShape)
            .data(that.data)
            .enter()
            .append(that.dataShape)
            .attr("transform", function(d) {
                return that.transformXYData(d);
            })
            .attr("d", symbolGenerator().size(100).type(function(d) {
                return that.generateShape(d);
            }))
            .attr("fill", function(d) {
                return that.generateColor(d);
            })
            .on("click", function(d) {
                that.onClickListener(this, d);
            })
    }
}

Posso creare un grafico in questo modo:

var chart = new BubbleChart();
chart.data = someData;
chart.width = 900;
chart.elementId = "#myChart";
chart.onClickListener = function(this,d){}
chart.drawChart();

Questa soluzione mi consente di utilizzare proprietà e funzioni comuni su tutti i grafici. Oltre a ciò, consente a qualsiasi istanza di qualsiasi grafico di sovrascrivere le proprietà e le funzioni predefinite (come ad esempio onClickListener).

Vedi qualche limite con una soluzione del genere? Non ho davvero visto l'ereditarietà di javascript usata per d3.js e mi chiedo perché? "Concatenare" è così importante? Utilizzando i suggerimenti di Mike Bostock, come possiamo condividere funzioni come lo zoom su tutti i grafici XY? L'ereditarietà non è assolutamente necessaria per condividere funzioni e proprietà?