Sequences sunburst, click and load new csv

[leo ligato]

Hi, I have a problem with the loading of a new csv into grafic sunburst. After clicking on "Lombardia",   "TypeError: path.node(...) is null " is visualized

[CODE]

var totalSize = 0; 

var vis = d3.select("#chart").append("svg:svg")

    .attr("width", width)

    .attr("height", height)

    .append("svg:g")

    .attr("id", "container")

    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var partition = d3.layout.partition()

    .size([2 * Math.PI, radius * radius])

    .value(function(d) { return d.size; });

var arc = d3.svg.arc()

    .startAngle(function(d) { return d.x; })

    .endAngle(function(d) { return d.x + d.dx; })

    .innerRadius(function(d) { return Math.sqrt(d.y); })

    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

// Use d3.text and d3.csv.parseRows so that we do not need to //have a header

// row, and can receive the csv as an array of arrays.

d3.text("totale.csv",function(text) {

  var csv = d3.csv.parseRows(text);

  var json = buildHierarchy(csv);

  createVisualization(json);

});

//funzione principale

function createVisualization(json) {

  // Bounding circle underneath the sunburst, to make it //easier to detect

  // when the mouse leaves the parent g.

  vis.append("svg:circle")

      .attr("r", radius)

      .style("opacity", 0);

  // For efficiency, filter nodes to keep only those large //enough to see.

  var nodes = partition.nodes(json)

      .filter(function(d) {

      return (d.dx > 0.005); // 0.005 radians = 0.29 degrees

      });

  var path = vis.data([json]).selectAll("path")

      .data(nodes)

      .enter().append("svg:path")

      .attr("display", function(d) { return d.depth ? null : "none"; })

      .attr("d", arc)

      .attr("fill-rule", "evenodd")

      .style("fill", function(d) { return colors[d.name]; })

      .style("opacity", 1)

      .on("mouseover", mouseover)

  // Add the mouseleave handler to the bounding circle.

  d3.select("#container").on("mouseleave", mouseleave);

  // Get total size of the tree = value of root node from //partition.

  totalSize = path.node().__data__.value;  //ERROR THIS LINE

  };

// funzionalità quando il mouse è sopra una semicorona (aggiorna barra gerarchia e opacizza altre corone)

function mouseover(d) {

//aggiungere valori centrali

  var percentage = (100 * d.value / totalSize).toPrecision(3);

  var percentageString =d.name+" "+ percentage + "%";

  if (percentage < 0.1) {

    percentageString = "< 0.1%";

  }

  d3.select("#percentage")

      .text(percentageString);

  d3.select("#explanation")

      .style("visibility", "");

  var sequenceArray = getAncestors(d);

  updateBreadcrumbs(sequenceArray, percentageString);

  // opacizza gli altri archi

  d3.selectAll("path")

      .style("opacity", 0.3);

  

  

  

  

  

  // colora il padre di dove sono posizionato

  vis.selectAll("path")

      .filter(function(node) {

                return (sequenceArray.indexOf(node) >= 0);

              })

      .style("opacity", 1);

  //qui devo aggiungere l'evento .on click

d3.selectAll("path").on("click", function(d,id){loadCSV(d,id);});

}

[/CODE]

and this is the function loadCSV

[CODE]

function loadCSV(d,id){

if(d.name == "Lombardia"){

d3.text("totale1.csv", function(text) {

  var csv = d3.csv.parseRows(text);

  var json = buildHierarchy(csv);

  createVisualization(json);

});

}else alert("prova"+id);

}

[/CODE]

[Anurag Ranjan]

Hi , 

I m facing same issue .. If u have any solution , Please share it