probelm to highlight part of suburst

14 views
Skip to first unread message

Maitep

unread,
Jan 5, 2017, 5:47:13 PM1/5/17
to d3-js
Hi everyone I have problem with my sunburst

this is my function to paint my chart

function render(items){
 
var root = items;
 
var gs = svg.selectAll("g").data(partition.nodes(root));
 
var g = gs.enter().append("g")
   
.on("mouseover", mostrar)
   
.on("mouseout", ocultar)
   
.call(function(d){
      total_jobs
= total(items.children);
      tooltip
.html("<div class=title_chart>Hours</div><div class=total_job>"+ total_jobs.toLocaleString() +"</div>");
   
})
   
.on("click", click);
 
var path = g.append("path").style("opacity", 1);


  gs
.select("path")
   
.style("fill", function(d){
     
if (d.depth != 0)
       
return color((d.children ? d : d.parent).name);
     
else
       
return "transparent";
   
})
   
.transition().duration(500)
   
.attr("d", arc);
   
if (path.node() != null)
      totalSize
= path.node().__data__.value;


  gs
.exit().transition().duration(500).style("fill-opacity", 1e-6).remove();
}

I use the function ucultar  and mostrar, when I move over the sunburst

I want to highlight the area where I am, and opacity the rest I did this with this...

function mostrar(d){
  d3
.selectAll("#cpu_hour path")
   
.style("opacity", 0.3);
 
var sequenceArray = getAncestors(d);
  svg
.selectAll("#cpu_hour path")
   
.filter(function(node) {
     
return (sequenceArray.indexOf(node) >= 0);
   
})
   
.style("opacity", 1);  


  tooltip
.html(format_description(d));  
 
return tooltip.transition()
   
.duration(50)
   
.style("opacity", 0.9);
}

when I am outside of my sunburst I want that again the opacity is 1, so I see all the sunburst.

And my problem is here, how to detect that I am outside the sunburst? and other thing when I move between the different part of my sunburst this function 
.on("mouseout", ocultar)


Always call, how to avoid this ... because this  call do that the opacity turn on 1 when I am inside the sunburst

function ocultar(d){

 
if (num_click == 1){
    tooltip
.html(format_description_short(d));
   
// hightlight()
 
}else{
   
if (num_click == 2){
      tooltip
.html(format_description_short(d));
     
//hightlight()
   
}else{
      tooltip
.html("<div class=title_chart>Cpu Hours</div><div class=total_job>"+ total_jobs.toLocaleString() +"</div>");
      tooltip
.transition()
       
.duration(50)
       
.style("opacity", 0.9);
       
var sequenceArray = getAncestors(d);
       
var elemento = svg.selectAll("#cpu_hour path")
       
.filter(function(node) {
         
return (sequenceArray.indexOf(node) >= 0);
       
})
       
// if (elemento[0].length == 0){
       
//   hightlight()
       
// }
   
}
 
}
}


Thanks in advances!
Reply all
Reply to author
Forward
0 new messages