gaia

Nice link! Thanks for your time, after many attempts i stopped thinking about JavaScript as an object-oriented language ,i solved easily, by declaring a global variable and giving it the value of the object that I wanted, var element;HTMLWidgets.widget({ ........ renderValue: function(el, x, instance) { // select the svg element and remove existing childern var svg = d3.select(el).select("svg"); element = svg; .......... }}); //onclick eventfunction doSomething(){ element.event("");} but I'm not sure this is elegant,

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?