how to add tooltip for donut chart in loop using d3js
<p>I have json object which generate dynamically,look like</p>

<pre><code>var data = 
[
{"hour":"16","percentage":50,"activity":[{"activity_id":"1","cnt":"1"}    {"activity_id":"2","cnt":"1"}]},
{"hour":17,"percentage":0,"activity":[]}
{"hour":"18","percentage":20,"activity":[{"activity_id":"1","cnt":"1"}    {"activity_id":"2","cnt":"5"}]},
{"hour":"19","percentage":80,"activity":[{"activity_id":"1","cnt":"5"}    {"activity_id":"3","cnt":"7"}]},

];
</code></pre>

<p>and i want to draw chart with the help of d3</p>

<pre><code> var can =     d3.select("#chart").append("svg").attr("height",200).attr("width",800);
        var r =100;
        var p = Math.PI*2;
        //give color to arc
        //if 0 range to yellow and 100 is red 
        var color = d3.scale.linear()
                    .domain([0,100])
                    .range(["#D6EBFD","#FF0000"]);  
        var group = can.append("g")
                    .attr("transform","translate(100,100)");

        //draw arc with outer and inner radius
        var arc = d3.svg.arc()
                .innerRadius(r - 30)
                .outerRadius(r)


        var pie = d3.layout.pie()
                .sort(null)
                .value(function (d){return data.length;});

        var arcs = group.selectAll(".arc")
                    .data(pie(data))
                    .enter().append("g")
                    .attr("class", "arc")
                    .attr('stroke','#fff')
                    .attr('stroke-width', '2')
                    .attr('fill',function(d){return color(d.data.percentage)})
                    .on("mouseover", function(d){
                        div.style("display", "inline")
                        //.text(d.data.percentage + ", " + d.data.hour)
                        .data(d.data.activity)
                       //problem is here to make tooltip when mouseover to the chart where i want data from activity array object?

                                .text(function(a){
                                    a.activity_id + ", " + a.cnt
                                })

                                .text(function(d){
                                    for(var i = 0;i&gt;data.activity.length;i++){

                                        return data.activity['activity_id'] + ", " + data.activity['cnt'];
                                    }

                                })

                        .style("left", (d3.event.pageX - 34) + "px")
                        .style("top", (d3.event.pageY - 12) + "px");
                            })
                    .on("mouseout", mouseout);

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

        arcs.append("text")
                .attr('transform',function(d){return "translate("+arc.centroid(d)+")";})
                .attr('fill','#0000FF')
                .attr('z-index',1)
                .text(function(d){return d.data.hour});



        var div = d3.select("#chart").append("div")
                                        .attr("class", "tooltip")
                                        .style("display", "none");


        function mouseout() {
                        div.style("display", "none");
                }
</code></pre>

<p>which draw a donut chart but i want to make tooltip when mouseover to the chart which is activity_id,cnt in loop.
(Please ignore the design)
What i need is when mouseover to 
16 tooltip must be 1,1
17 tooltip must be 
18 tooltip must be 1,1
                   2,5
19 tooltip must be 1,5
                   3,7
This is my first time to d3,so please can anyone help me.Thanks in advance.</p>