如何使用d3js在循环中为甜甜圈图添加工具提示

Question

I have json object which generate dynamically,look like

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"}]},

];

and i want to draw chart with the help of d3

 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>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");
                }

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.

Answer 1

Instead of doing it like this having 2 text function which is wrong:

.text(function(a){
  a.activity_id + ", " + a.cnt
})
.text(function(d){
  for(var i = 0;i>data.activity.length;i++){
   return data.activity['activity_id'] + ", " + data.activity['cnt'];
  }
})

write a single text function like this:

.text(function() {
  var str = "";
  d.data.activity.forEach(function(a){
            //make the display string by iterating over activity.
            str += a.activity_id + ", " + a.cnt + " ";
  })
  return str;
})

Working code here