Question

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

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

我希望借助d3

绘制图表

...
if request.method == "POST":
form = contactForm(request.POST)
if form.is_valid():
    sujet = form.cleaned_data['sujet']
    message= form.cleaned_data['message']
    try:
        mail_admins(subject=sujet, message=message)
...

绘制圆环图但我想在鼠标悬停到图表时制作工具提示，即循环中的activity_id，cnt。（请忽略设计）我需要的是什么时候鼠标悬停到 16工具提示必须是1,1 必须提供17个工具提示 18工具提示必须是1,1 2,5 19工具提示必须是1,5 3,7 这是我第一次去d3，所以请任何人帮助我。谢谢。

Answer 1

而不是像这样做有2个错误的文本功能：

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

工作代码here

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

1 个答案: