Javascript 在饼图中使用鼠标悬停并在d3 js中显示标签

您好，我是d3js新手，因此我无法在饼图的给定代码中使用鼠标悬停事件…我有一个id为

的
，名为
图表
，因此如何创建鼠标悬停事件的类并显示标签

下面是我用来绘制饼图的代码：

var w = 300;
var h = 300;

var dataset =  [
  {"year":"2017-07-01","value":"5"},
  {"year":"2017-07-02","value":"10"},
  {"year":"2017-07-03","value":"15"},
  {"year":"2017-07-04","value":"20"},
  {"year":"2017-07-05","value":"25"},
  {"year":"2017-07-06","value":"30"},
  {"year":"2017-07-07","value":"35"},
  {"year":"2017-07-08","value":"40"},
  {"year":"2017-07-09","value":"45"},
  {"year":"2017-07-10","value":"50"},
  {"year":"2017-07-11","value":"55"},
  {"year":"2017-07-12","value":"60"},
  {"year":"2017-07-13","value":"65"},
  {"year":"2017-07-14","value":"70"}
];

var outerRadius = w / 2;
var innerRadius = 0;
var arc = d3.svg.arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius);

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

var color = d3.scale.category20();

var svg = d3.select("#chart")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

var arcs = svg.selectAll("g.arc")
  .data(pie(dataset))
  .enter()
  .append("g")
  .attr("class", "arc")
  .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

arcs.append("path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", arc);

arcs.append("text")
  .attr("transform", function(d) {
    return "translate(" + arc.centroid(d) + ")";
  })
  .attr("text-anchor", "middle")
  .text(function(d) {
    return d.value;
  });

我假设您想要的是工具提示。最简单的方法是在每个圆上附加一个svg:title元素，因为浏览器将负责显示工具提示，而您不需要鼠标手柄。代码类似于
vis.selectAll（“圆圈”）
.data（数据过滤）.enter（）.append（“svg:circle”）
...
.append（“svg:title”）
.text（函数（d）{return d.x；}）；
如果您想要更丰富的工具提示，可以使用tipsy作为示例。请参见此处以获取示例。
在HTML中添加样式

   <style>
      #chart {                                                           
        height: 360px;                                                  
        position: relative;                                              
        width: 360px;                                                    
      }                                                                 
      .tooltip {                                                         
        background: #eee;                                                
        box-shadow: 0 0 5px #999999;                                    
        color: #333;                                                    
        display: none;                                                   
        font-size: 12px;                                                
        left: 130px;                                                    
        padding: 10px;                                                  
        position: absolute;                                             
        text-align: center;                                             
        top: 95px;                                                       
        width: 80px;                                                     
        z-index: 10;                                                     
      }                                                                 
      .legend {
        font-size: 12px;
      }
      rect {
        stroke-width: 2;
      }
    </style>

我希望这对你有帮助。您可能需要解决这个问题，这取决于您希望如何显示工具提示以及如何在图表中填充数据

    var width = 360;
    var height = 360;
    var radius = Math.min(width, height) / 2;
    var donutWidth = 75;
    var legendRectSize = 18;
    var legendSpacing = 4;

    var color = d3.scale.category20b();

    var svg = d3.select('#chart')
      .append('svg')
      .attr('width', width)
      .attr('height', height)
      .append('g')
      .attr('transform', 'translate(' + (width / 2) + 
        ',' + (height / 2) + ')');

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

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

    var tooltip = d3.select('#chart')                               
      .append('div')                                                
      .attr('class', 'tooltip');                                    

    tooltip.append('div')                                           
      .attr('class', 'label');                                      

    tooltip.append('div')                                          
      .attr('class', 'count');                                      

    tooltip.append('div')                                           
      .attr('class', 'percent');                                    


      var path = svg.selectAll('path')
        .data(pie(dataset))
        .enter()
        .append('path')
        .attr('d', arc)
        .attr('fill', function(d, i) { 
          return color(d.data.label); 
        });

      path.on('mouseover', function(d) {                            
        var total = d3.sum(dataset.map(function(d) {                
          return d.count;                                           
        }));                                                        
        var percent = Math.round(1000 * d.data.count / total) / 10; 
        tooltip.select('.label').html(d.data.label);                
        tooltip.select('.count').html(d.data.count);                
        tooltip.select('.percent').html(percent + '%');             
        tooltip.style('display', 'block');                          
      });                                                           

      path.on('mouseout', function() {                              
        tooltip.style('display', 'none');                           
      });                                                           



      var legend = svg.selectAll('.legend')
        .data(color.domain())
        .enter()
        .append('g')
        .attr('class', 'legend')
        .attr('transform', function(d, i) {
          var height = legendRectSize + legendSpacing;
          var offset =  height * color.domain().length / 2;
          var horz = -2 * legendRectSize;
          var vert = i * height - offset;
          return 'translate(' + horz + ',' + vert + ')';
        });

      legend.append('rect')
        .attr('width', legendRectSize)
        .attr('height', legendRectSize)                                   
        .style('fill', color)
        .style('stroke', color);

      legend.append('text')
        .attr('x', legendRectSize + legendSpacing)
        .attr('y', legendRectSize - legendSpacing)
        .text(function(d) { return d; });