D3: Interazione semplice - Cerchio con un clic

Question

Sto imparando D3. Conosco cose semplici come fare una trama a dispersione e tutto il resto. Il mio prossimo passo è provare alcune semplici mosse interattive. Ad esempio, dopo aver aggiunto uno svg, gli assi e le griglie, ora desidero creare un cerchio facendo clic su un punto all'interno della tela svg. Immagino che dovrò registrare le coordinate del punto cliccato e quindi aggiungere un cerchio con il suo cx nad cy, ma come? Come registrare le coordinate?

Apprezzo che tu mi mostri un tutorial, dare un suggerimento o meglio di tutti un esempio.

Answer 1

Se si ha familiarità con JQuery, D3 dovrebbe avere un aspetto amichevole, poiché condivide un'API simile. In particolare per quanto riguarda la sintassi .on(action, fn) per collegare un listener di eventi a una selezione DOM.

Se si verifica il jsFiddle che ho creato che implementa un'implementazione molto di base di quello che stai cercando, allora puoi vederlo in movimento in 21 righe di JS.

(function() { 
    var svg = d3.select('svg'); 

    function getRandom(min, max) { 
     return Math.floor(Math.random() * (max - min) + min); 
    } 

    function drawCircle(x, y, size) { 
     console.log('Drawing circle at', x, y, size); 
     svg.append("circle") 
      .attr('class', 'click-circle') 
      .attr("cx", x) 
      .attr("cy", y) 
      .attr("r", size); 
    } 

    svg.on('click', function() { 
     var coords = d3.mouse(this); 
     console.log(coords); 
     drawCircle(coords[0], coords[1], getRandom(5,50)); 
    }); 
})(); 

Gli aspetti più importanti di questo frammento sono sulle linee 18-20 (.on(...) e d3.mouse(this)). L'evento on('click',..) è collegato all'elemento svg. Quando si verifica un clic, d3.mouse viene chiamato con l'ambito corrente come argomento. Quindi restituisce una matrice con le coordinate xey dell'evento del mouse. Questa informazione viene quindi passata a drawCircle, insieme a un raggio casuale per disegnare un cerchio sulla tela SVG corrente.

Ti consiglio di prendere il jsFiddle e giocare!