如何使用d3js为循环中的圆环图添加工具提示

how to add tooltip for donut chart in loop using d3js

本文关键字：圆环图 添加 工具提示 循环 何使用 d3js      更新时间：2023-09-26

我有一个动态生成的json对象，看起来像

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

我想借助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");
                }

它画了一个圆环图，但我想在鼠标移到循环中的activity_id、cnt图表时制作工具提示。（请忽略设计）我需要的是当鼠标移到16工具提示必须为1,117工具提示必须18工具提示必须为1,12,519工具提示必须为1,53,7这是我第一次来d3，有人能帮我吗？提前谢谢。

不是这样做的，而是有两个错误的文本函数：

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

写一个这样的单一文本函数：

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

此处的工作代码

相关文章：