score:3

I got idea of your question, but you don't give data.csv file. So I took my own data for drawing donut chart with tooltip. But your are using predefined tooltip, which is given by D3.

        var data = [{"age":"1-5","population":2000},
        {"age":"6-10","population":1000},
        {"age":"11-15","population":3000},
        {"age":"16-20","population":1200},
        {"age":"21-25","population":900},{"age":"26-30","population":1500},
        {"age":"31-35","population":600},{"age":"36-40","population":1200},
        {"age":"41-45","population":900}];
        var margin = {top:40,left:40,right:40,bottom:40};
        width = 650;
        height = 650;
        radius = Math.min(width-100,height-100)/2;
        var color = d3.scale.ordinal()
           .range(["#e53517","#6b486b","#ffbb78","#7ab51d","#6b486b",
                  "#e53517","#7ab51d","#ff7f0e","#ffc400"]);              
     var arc = d3.svg.arc()  
               .outerRadius(radius -130)
               .innerRadius(radius - 10);
    var arcOver = d3.svg.arc()  
              .outerRadius(radius +50)
              .innerRadius(0);
    var svg = d3.select("#svgContent").append("svg")
              .attr("width",width)
              .attr("height",height)
              .append("g")
              .attr("transform","translate("+width/2+","+height/2+")");
   div = d3.select("body")
        .append("div") 
        .attr("class", "tooltip");
  var pie = d3.layout.pie()
      .sort(null)
      .value(function(d){return d.population;});
  var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter()
    .append("g")
    .attr("class","arc")
     .on("mousemove",function(d){
        var mouseVal = d3.mouse(this);
        div.style("display","none");
        div
        .html("age:"+d.data.age+"</br>"+"population:"+d.data.population)
        .style("left", (d3.event.pageX+12) + "px")
        .style("top", (d3.event.pageY-10) + "px")
        .style("opacity", 1)
        .style("display","block");
    })
    .on("mouseout",function(){div.html(" ").style("display","none");})
    .on("click",function(d){
        if(d3.select(this).attr("transform") == null){
        d3.select(this).attr("transform","translate(42,0)");
        }else{
            d3.select(this).attr("transform",null);
        }
    });


    g.append("path")
    .attr("d",arc)
    .style("fill",function(d){return color(d.data.age);});

                svg.selectAll("text").data(pie(data)).enter()
                 .append("text")
                 .attr("class","label1")
                 .attr("transform", function(d) {
                   var dist=radius+15;
                   var winkel=(d.startAngle+d.endAngle)/2;
                   var x=dist*Math.sin(winkel)-4;
                   var y=-dist*Math.cos(winkel)-4;

                   return "translate(" + x + "," + y + ")";
                })
                .attr("dy", "0.35em")
                .attr("text-anchor", "middle")

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

For more clarity, see this link.

This is animated screenshot of this code in action:

enter image description here


Related Query

More Query from same tag