Evento ".onClick" su oggetto di d3.js

[gaiagilder]

Ciao a tutti,

Ho tentato di imparare il più possibile su javascript e soprattutto sulla sua implementazione object oriented e sto provando a fare una cosa che ho implementato diverse volte in contesti più semplici ma che ora mi spiazza anche perchè mi mancano concetti base sulla programmazione per il web.

Sto provando la libreria D3 con il Plugin Sankey, un esempio pratico si può trovare qua:
http://bost.ocks.org/mike/sankey,

quello che vorrei fare è inserire un bottone in un file html che contiene anche il div con gli oggetti e l' svg costruiti da D3

che una volta cliccato attiva la funzionalità "zoom" di D3 attraverso uno snippet tipo questo

svg.call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom)).append("g");

da qui
http://bl.ocks.org/git-ashish/65d72d26368bd3bf75bf

questa è una parte del mio codice, ho tagliato molto,

HTMLWidgets.widget({

    name: "sankeyNetwork",
    type: "output",
    initialize: function(el, width, height) {

        d3.select(el).append("svg")
            .attr("width", width )
            .attr("height", height);

        return {
          sankey: d3.sankey(),
          x: null
        };
    },

    resize: function(el, width, height, instance) {
        d3.select(el).select("svg")
            .attr("width", width)
            .attr("height", height);

        this.renderValue(el, instance.x, instance);
    },

    renderValue: function(el, x, instance) {

        // save the x in our instance (for calling back from resize)
        instance.x = x;

        // alias sankey and options
        var sankey = instance.sankey;
        var options = x.options;

        // convert links and nodes data frames to d3 friendly format
        var links = HTMLWidgets.dataframeToD3(x.links);
        var nodes = HTMLWidgets.dataframeToD3(x.nodes);

        // get the width and height
        var width = el.offsetWidth;
        var height = el.offsetHeight;

//colori
        var color = d3.scale.ordinal()
  .domain([0.0,0.1, 0.2, 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19])
  .range(["#6B6662", "#867f7a" , "#3f3c39" ,"#59A031","#B1D363","#ECA72F","#F1CB3C","#834E82","#C87DD7","#48597F",
    "#6C7088","#DF432C","#E37359","#966221","#A78150","#539DD1","#D97B31","#3CE6E9",
    "#bbb","#ccc","#eee","#ddd"]);

        var formatNumber = d3.format(".2s"),
        format = function(d) { return formatNumber(d); }

// create d3 sankey layout
        sankey
            .nodes(d3.values(nodes))
            .links(links)
            .size([width - width/11.21, height-height/250])
            .nodeWidth(options.nodeWidth)
            .nodePadding(options.nodePadding)
            .layout(32);

// select the svg element and remove existing childern
       var svg = d3.select(el).select("svg");
       var path = sankey.link();

        //colori
var cscale = d3.scale.category20b();

// draw links
        var link = svg.selectAll(".link")
        .filter(function(d) { return d.value > 0; })
            .data(sankey.links())
            .enter().append("path")
            .attr("class", "link")
            .attr("d", path)
            .sort(function(a, b) { return b.dy - a.dy; });
// draw nodes
        var node = svg.selectAll(".node")
            .data(sankey.nodes())
            .enter().append("g")
            .attr("class", "node");
//nodebox
        node.append("rect")
            .filter(function(d) { return d.value > 0; })
            .attr("height", function(d) { return d.dy / 0.987654321; })
            .attr("width", function(d) { return width - width/1.175; });
        }
});

Quello che non riesco a capire è che ruolo ha il mio codice nella OOP, come posso per esempio istanziare un oggetto che eredita la proprietà che mi serve per attivare un evento su un

<input type="image" id="myimage" src="img/zoom.png" style="height:30px;width:30px;" />

?

:skull: