Evento ".onClick" su oggetto di d3.js

gaiagilder

Nuovo Utente
21 Mar 2015
1
0
0
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
Codice:
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,

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:
 
Discussioni simili
Autore Titolo Forum Risposte Data
S [RISOLTO]Carica pagina da evento onclick di una griglia Javascript 12
F gestire evento onclick Javascript 4
A evento onclick visualizzare video flash Javascript 0
C ID che si incrementa ad ogni evento Database 0
T Query per ricerca ritardo evento MS Access 7
elpirata [MYSQL] Schedulare evento per update del campo data su tabella MySQL 0
C creare evento mysql MySQL 2
Sermatth72 APACHE ERRORE 1 - AH00558: httpd.exe, e ID Evento 3299 Apache 3
A [Javascript] evento onresize Javascript 1
S [Javascript] Catturare l'evento click di un bottone Javascript 3
francabbestia [Javascript] Scattare una foto da webcam quando avviene un evento Javascript 1
A Evento onkeypress (Invio) PHP 10
A Evento onkeypress (Invio) HTML e CSS 2
G evento collided Sviluppo app per Android 1
B Evento blur chiamata file php jQuery 1
K evento click - link a pagina.php con parametri HTML e CSS 3
F Caricare immagine da Mysql su evento click-radio Javascript 5
E evento... magari! problema PHP 2
F Gestione evento checkbox Javascript 5
M HTML5 datalist evento onchange HTML e CSS 1
K Problema evento onchange Javascript 1
V non mi funziona l' evento per riconoscere un pulsante da tastiera Javascript 0
W Evento Back con Jquery jQuery 1
F Evento al secondo click su un ancora jQuery 21
P Cambiare evento da "click" in "premi tasto invio" jQuery 3
Sevenjeak [vb.net] evento MDIChildActived Visual Basic 0
GoshMaledetto problemino evento click jQuery 4
GoshMaledetto La funzione non viene richiamata all evento onChange Javascript 5
E Evento click su Coordinate jQuery 1
carter Link lampeggiante per trasmissione evento Classic ASP 0
P [VENDO] "trucchetto" per inviare tutti amici a evento o pagina Annunci servizi di Social Media Marketing 0
L Evento:MEMENTO AUDERE WEB A PESCARA SEO e Posizionamento 0
W domanda su evento al passare del mouse Javascript 2
A help, modificare evento per un singolo elemento Javascript 0
W [C#] Quale evento per DataGridViewCheckBoxCell ?? .NET Framework 1
E [JAVA] modificare Script per evento onmouseover Javascript 0
S NATO DA POCO MA Caspita! www.festaking.it organizzi on line ogni tipo di festa evento Presenta il tuo Sito 5
D MOTOOLS: come fare ad avere un evento che periste quando si sta dentro un elemento? Javascript 2
R evento onChange() Javascript 0
D evento temporizzato(forse con un timer?) ASP.NET 1
T [Java] Problema evento Java 1
A associare un evento a tanti fotogrammi Flash 1
F Evento Onchange Javascript 2
P Aggiungi evento di controllo campo testo Ajax 11
F l'evento onchange non funziona su FF Classic ASP 1
A Visualizzare Un Immagine Dopo Un Evento PHP 4
simoncino Cletarte - Evento artistico a Cleto (CS) Presenta il tuo Sito 1
N 8 > 23 Febbraio: Doppio Evento Live a Roma con Tony Braschi Altri Annunci 0
U 2007: 8 & 23 Febbraio - Doppio Evento a Roma Discussioni Varie 0
U 2007: 8 & 23 Febbraio - Doppio Evento a Roma Altri Annunci 0

Discussioni simili