wie Tooltip für Ringdiagramm in Schleife d3js mit hinzufügen

Question

ich Json Objekt haben, die dynamisch generieren, sehen aus wie

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

]; 

und ich will Diagramm mit Hilfe von 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"); 
       } 

ziehen, die zeichne ein Donut-Diagramm, aber ich möchte Tooltip machen, wenn Mouseover auf das Diagramm, das activity_id, cnt in Schleife ist. (Bitte ignorieren Sie das Design) Was ich brauche, ist, wenn Mouseover 16 Tooltip 1,1 17 Tooltip 18 Tooltip 1,1 sein muss, muss 2,5 19 Tooltip 1,5 sein muss, muss 3 , 7 Dies ist mein erstes Mal zu d3, also bitte kann mir jemand helfen.Vielen Dank im Voraus.

Answer 1

Statt es wie dieses mit 2 Textfunktion zu tun, was falsch ist:

.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']; 
    } 
}) 

schreiben einen einzelnen Text-Funktion wie folgt aus:

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

Arbeits Code here