4

我想在 D3 圆环图中添加工具提示。如何才能做到这一点？我还想在饼图中添加每个部分的百分比。

这是我的代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

 body {
  font: 14px sans-serif;
 }

 svg {
padding: 10px 0 0 10px;
}
.arc {
 stroke: #000;
}
.arc:hover{
stroke: yellow;
}
.pie:hover {
  fill: orangered ;
}

 </style>
<body>
<div class = "InfoVis"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text("a simple tooltip");
var radius = 144,
    padding = 20;

var color = d3.scale.ordinal()
    .range(["#00ffff", "#00ff00", "#ffbf00", "#fe2ec8", "#bdbdbd", "#3104b4", "#5882fa"]);

var arc = d3.svg.arc()
    .outerRadius(radius)
    .innerRadius(radius - 40);

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

d3.csv("data.csv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Cereal"; }));

  data.forEach(function(d) {
    d.nutri = color.domain().map(function(name) {
      return {name: name, nutrifacts: +d[name]};
    });
  });

  var legend = d3.select("body").append("svg")
  .attr("class", "legend")
  .attr("width", radius * 2)
  .attr("height", radius * 2)
    .selectAll("g")
  .data(color.domain().slice().reverse())
    .enter().append("g")
  .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", color);

  legend.append("text")
  .attr("x", 24)
  .attr("y", 9)
  .attr("dy", ".55em")
  .text(function(d) { return d; });


  var svg = d3.select("body").selectAll(".pie")
  .data(data)
.enter().append("svg")
  .attr("class", "pie")
  .attr("width", radius * 2)
  .attr("height", radius * 2)
.append("g")
  .attr("transform", "translate(" + radius + "," + radius + ")");

  svg.selectAll(".arc")
  .data(function(d) { return pie(d.nutri); })
.enter().append("path")
  .attr("class", "arc")
  .attr("d", arc)
  .style("fill", function(d) { return color(d.data.name); });


  svg.append("text")
  .attr("dy", ".35em")
  .style("text-anchor", "middle")
  .text(function(d) { return d.Cereal; });

});



</script>

请帮助我在此代码中添加工具提示，并在可能的情况下为工具提示添加颜色。

4

1 回答 1

2

我知道你的问题，但你没有提供 data.csv 文件。所以我用我自己的数据来绘制带有工具提示的圆环图。但是您使用的是由 D3 提供的预定义工具提示。

        var data = [{"age":"1-5","population":2000},
        {"age":"6-10","population":1000},
        {"age":"11-15","population":3000},
        {"age":"16-20","population":1200},
        {"age":"21-25","population":900},{"age":"26-30","population":1500},
        {"age":"31-35","population":600},{"age":"36-40","population":1200},
        {"age":"41-45","population":900}];
        var margin = {top:40,left:40,right:40,bottom:40};
        width = 650;
        height = 650;
        radius = Math.min(width-100,height-100)/2;
        var color = d3.scale.ordinal()
           .range(["#e53517","#6b486b","#ffbb78","#7ab51d","#6b486b",
                  "#e53517","#7ab51d","#ff7f0e","#ffc400"]);              
     var arc = d3.svg.arc()  
               .outerRadius(radius -130)
               .innerRadius(radius - 10);
    var arcOver = d3.svg.arc()  
              .outerRadius(radius +50)
              .innerRadius(0);
    var svg = d3.select("#svgContent").append("svg")
              .attr("width",width)
              .attr("height",height)
              .append("g")
              .attr("transform","translate("+width/2+","+height/2+")");
   div = d3.select("body")
        .append("div") 
        .attr("class", "tooltip");
  var pie = d3.layout.pie()
      .sort(null)
      .value(function(d){return d.population;});
  var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter()
    .append("g")
    .attr("class","arc")
     .on("mousemove",function(d){
        var mouseVal = d3.mouse(this);
        div.style("display","none");
        div
        .html("age:"+d.data.age+"</br>"+"population:"+d.data.population)
        .style("left", (d3.event.pageX+12) + "px")
        .style("top", (d3.event.pageY-10) + "px")
        .style("opacity", 1)
        .style("display","block");
    })
    .on("mouseout",function(){div.html(" ").style("display","none");})
    .on("click",function(d){
        if(d3.select(this).attr("transform") == null){
        d3.select(this).attr("transform","translate(42,0)");
        }else{
            d3.select(this).attr("transform",null);
        }
    });


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

                svg.selectAll("text").data(pie(data)).enter()
                 .append("text")
                 .attr("class","label1")
                 .attr("transform", function(d) {
                   var dist=radius+15;
                   var winkel=(d.startAngle+d.endAngle)/2;
                   var x=dist*Math.sin(winkel)-4;
                   var y=-dist*Math.cos(winkel)-4;

                   return "translate(" + x + "," + y + ")";
                })
                .attr("dy", "0.35em")
                .attr("text-anchor", "middle")

                .text(function(d){
                  return d.value;
                });

为了更清楚，请参阅此链接。

这是此代码的动画屏幕截图：

在此处输入图像描述

于 2014-08-09T14:43:19.703 回答