Accesso all'oggetto SVG D3 all'interno dell'evento click on

Question

Sto lavorando a un grafico a bolle e ho allegato un evento su clic a ciascuno dei cerchi. Quando si fa clic su un cerchio, il grafico a bolle verrà sostituito con un nuovo grafico che rappresenta un'informazione più dettagliata.

Ecco parte del codice:

svg.selectAll("circle") 
       .data(dataset) 
       .enter() 
       .append("circle") 
       .attr("cx", function(d) { 
        return scaleX(d[2]); 
       }) 
       .attr("cy", function(d) { 
        return scaleY(100 - d[1]); 
       }) 
       .attr("r", function(d) { 
        return d[1]; 
       }) 
       .attr("fill", "#4eb157") 
       .attr("stroke", "#00c4d4") 
       .attr("stroke-width", function(d) { 

        return d[1]*(1-d[2]/100)*1.5; 

       }) 
       .on("click", function() 
            { 


             svg.selectAll("circle") 
             .data(new_dataset) 
             .enter() 
             .append("circle") 
             .attr("cx", function(d) { 
              return scaleX(d[2]); 
             }) 
             .attr("cy", function(d) { 
              return scaleY(100 - d[1]); 
             }) 
             .attr("r", function(d) { 
              return d[1]; 
             }) 
             .attr("fill", "#4eb157") 
             .attr("stroke", "#00c4d4") 
             .attr("stroke-width", function(d) { 

              return d[1]*(1-d[2]/100)*1.5; 

             });    


            svg.selectAll("text") 
             .data(new_dataset) 
             .enter() 
             .append("text") 
             .text(function(d) { 
              return d[0]; 
             }) 
             .attr("x", function(d) { 
              return scaleX(d[2]); 
             }) 
             .attr("y", function(d) { 
              return scaleY(100 - d[1]); 
             }) 
             .attr("font-family", "sans-serif") 
             .attr("font-size", "11px") 
             .attr("fill", "red"); 
            }); 

Il problema viene quando clicco sul cerchio, l'intero grafico scompare, ma nessun nuovo grafico viene visualizzato. Ho capito che durante l'esecuzione della funzione on-click, l'oggetto svg è cambiato dal suo stato iniziale e in particolare alcune delle proprietà come baseURI, clientHeight, clientWidth ecc non sono più impostate anche se erano quando inizialmente si creava lo svg oggetto. Qui è il codice con il quale sto creando l'oggetto SVG:

var svg = d3.select("body").append("svg") 
        .attr("width", w) 
        .attr("height", h); 

mia domanda è perché è il nuovo grafico non appare? Questo è dovuto alle proprietà modificate dell'oggetto svg? Cosa dovrei cambiare nella funzione "on-clic" per rendere il nuovo grafico visualizzato correttamente?

Grazie!

Answer 1

Il problema è che nell'evento onclick si selezionano tutti i cerchi sotto l'elemento svg e li si unisce con new_dataset. Probabilmente vuoi selezionare un altro insieme di elementi del cerchio e unire new_dataset a questo gruppo di cerchi. Un modo per farlo è creare due gruppi sotto lo svg, uno per il set originale e l'altro per le cerchie di new_dataset, un'altra soluzione è assegnare diverse classi a diversi gruppi di cerchi e restringere ogni selezione usando la classe.

Nei seguenti link è possibile trovare una spiegazione più chiara sul meccanismo che unisce:

• D3 Tutorial - Scott Murray
• Thinking with Joins - Mike Bostok