How to access the properties of an object?

[gaia]

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?

[Ingolme]

Javascript is not really object-oriented. There is no native inheritance or polymorphism. If you're just starting to learn object-oriented programming Javascript is the last language I would suggest for it.

[gaia]

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,

Edited March 23, 2015 by gaia

[Ingolme]

You can pass the input itself to the function using the this keyword:

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

Inside that function you can create a d3 object, by passing the element to the select() function. (I assume this is how D3 works, I haven't read the documentation)

function doSomething(el) {    var element = d3.select(el);    // "element" is now a D3object    // Do what you want with it    // ...}

[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,

Edited March 23, 2015 by gaia

[davej]

You might take a look at...

 

http://www.crockford.com/javascript/inheritance.html

[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,