gaia

Sorry, i have not explained well, i'm also learning English ,

with your script i can perform actions on the object itself, instead I would like to add an event to the element so that i can zoom in "svg" that is handled by d3,

Thanks for the reply, i know that avascript it is not natively jobject oriented, i'm also taking a course in java, i can see that there are many differences, java is much more structured (although some say that java is not a pure object-oriented language ) but,

in my case, as javascript is not a native object-oriented language and everything we create with is an oject, i'm trying to understand how to use it well,

solving this problem for me is a key,

I'm learning javascript and especially object-oriented programming, after a lot of theory I have the 'opportunity to make practical tests but I'm having difficulty.

I am using D3.js library with its SankeyNetwork plugin to draw graphs and HTMLWidget to use the data returned by R language and process them to d3 friendly format.

I'm working on two files, the first is .html that contains the data, the second is the file SankeyNetwork.js that creates objects in svg and hangs them.

SankeyNetwork.js:

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;   //colors     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();        //colors       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,  { 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; });        }});

My goal is to implement the zoom feature of D3

svg.call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom));function zoom() {  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");}

by handling an onClick event in a html element that isn't create by D3, for exapmple:

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

To do this I need to access the properties of objects, but in this case it is difficult for me to understand how I can inherit the properties by instantiating a new object, how could I do?