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
da qui
http://bl.ocks.org/git-ashish/65d72d26368bd3bf75bf
questa è una parte del mio codice, ho tagliato molto,
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
?
:skull:
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
Codice:
svg.call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom)).append("g");
http://bl.ocks.org/git-ashish/65d72d26368bd3bf75bf
questa è una parte del mio codice, ho tagliato molto,
Codice:
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
Codice:
<input type="image" id="myimage" src="img/zoom.png" style="height:30px;width:30px;" />
:skull: