Ciao,
ho impostato una mappa con D3, creo dei cerchi e da un file esterno, do le proprietà. per alcuni ho la necessità di avere un diametro differente, quindi portarli in primo piano. A fine ciclo duplico il cerchio per averlo sovrapposto. A questo punto non riesco a recuperare le dimensioni del raggio dalla funzione iniziale (d).

// raggio dell'oggetto originale
//.attr("r", function(d) { return (d.diametro/2); })

grazie!



codice:
<script type="text/javascript">
 var margin = { top: 50, right: 0, bottom: 100, left: 30 },
 width = 960 - margin.left - margin.right,
 height = 960 - margin.top - margin.bottom,
 //gridsize crea la griglia
 gridSize = Math.floor(44),
 datasets = ["cover1.tsv", "cover2.tsv"];
 // chart e il div che contiene il tutto
 var svg = d3.select("#chart").append("svg")
 .attr("width", width + margin.left + margin.right)
 .attr("height", height + margin.top + margin.bottom)
 .append("g")
 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var heatmapChart = function(tsvFile) {
        d3.tsv(tsvFile,
        function(d) {
          return {
           ascisse: +d.ascisse,
           ordinate: +d.ordinate,
  diametro: +d.diametro,
  coloreInizialeRGB1: +d.coloreInizialeRGB1,
  coloreInizialeRGB2: +d.coloreInizialeRGB2,
  coloreInizialeRGB3: +d.coloreInizialeRGB3,
  coloreRGB1: +d.coloreRGB1,
  coloreRGB2: +d.coloreRGB2,
  coloreRGB3: +d.coloreRGB3,
  profondita: +d.profondita
          };
},
 function(error, data) {
 // ogni elemento duplicato ha la classe elimina, la seleziono e gli applico il remove
 d3.selectAll(".elimina").remove();
 var cards = svg.selectAll()
 .data(data, function(d) {return d.ascisse+':'+d.ordinate;});

 cards.enter().append("circle")
  .attr("cx", function(d) { return ((d.ordinate - 1) * gridSize);  })
 .attr("cy", function(d) { return ((d.ascisse - 1) * gridSize); })
 //carica tutte le classi 
 .attr("class", function(d) { return ("profondita"+d.profondita+" elimina"); })

 // crea il cerchio e inizio la transizione di tipo elastic la transizioni comincia da un valore fisso 
 .attr("r", function(d) { return (d.diametro/2); })
 .attr("r", 2)
 .transition("elastic") 
     .duration(1000)
 .attr("r", function(d) { return (d.diametro/2); })
 //crea la transizione di colore da iniziale a finale
 .style("fill", function(d) { return ("rgb("+d.coloreInizialeRGB1+","+d.coloreInizialeRGB2+","+d.coloreInizialeRGB3+")")});
        cards.transition().duration(1000)
  .style("fill", function(d) { return ("rgb("+d.coloreRGB1+","+d.coloreRGB2+","+d.coloreRGB3+")")});
 
 

 cards.exit().remove();
//fadeToFront();
//setTimeout("fadeToFront()",1500);
//var fadeToFront = function() {
 
 
 

var avanti2 = d3.selectAll(".profondita2");
 var origNode = avanti2.node();
 
 
 
//duplica quello che si chiama avanti, e append la copia on "top" 

var duplica = d3.select(d3.selectAll(".profondita2").node().parentNode.appendChild(origNode.cloneNode(true), origNode.nextSibling));
//var duplica = d3.select(origNode.parentNode.appendChild(origNode.cloneNode(true), origNode.nextSibling));
 duplica.attr("r", function(d) { return (1); })
 .transition("elastic") 
 .duration(1000)
// raggio dell'oggetto originale
 //.attr("r", function(d) { return (d.diametro/2); })
 .attr("r", function(d) { return (210); })
 //.attr("r", function(d) { return (r); })
 //Make the new element transparent immediately, then fade it in over time
 duplica.style("opacity", 0.0)
 .transition()
 .duration(1000)
 .style("opacity", 1.0)
 
//.each("end", function(error, data) {
.each("end", function() {
 //cancella l'originale
 avanti2.remove();
});
 
 
// chiude fadeToFront
//};

//chiude funzione error, data
        });

        
 
  //chiude heatmapChart
      };