如何使用交互式图例更新d3饼图上的标签

时间:2015-04-17 15:01:43

标签: javascript d3.js svg pie-chart interactive

我开发了一个D3饼图。它有一个交互式图例,点击图例会删除或重新输入相应的饼图段。我的问题是,在使用图例时,我无法弄清楚如何更新标签。

我发现this answer特别有帮助,但我仍然无法自己工作。

NVd3饼图具有此功能,但我正在寻找纯粹的d3解决方案。

我的代码位于this fiddle

enter image description here

我已经包含了我认为问题所在的部分:

legend.on('click.updatelabels', function(Task) {                            
    var rect = d3.select(this);                             
    var enabled = true;                                     
    var totalEnabled = d3.sum(chartData.map(function(d) {     
        return (d.enabled) ? 1 : 0;                           
    }));                                                    

    if (rect.attr('class') === 'disabled') {                
        rect.attr('class', '');                               
    } else {                                                
        if (totalEnabled < 2) return;                         
        rect.attr('class', 'disabled');                       
        enabled = false;                                      
    }                                                       

    layoutLabels.value(function (d) { return (d.enabled) ? 1 : 0;  });

    d3.select('Text').selectAll("pieLegend").remove()

    pieLabels.select("text")   
       .attr("transform", function (d) {
           var c = arc.centroid(d),
               x = c[0],
               y = c[1],
               // pythagorean theorem for hypotenuse
               h = Math.sqrt(x * x + y * y);
           return "translate(" + (x / h * labelRadius) + ',' +
              (y / h * labelRadius) + ")";
       })
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      .text(function (d, i) { return ((d.Volume / sum) * 100).toFixed(0) + "%"; });
});    

我将不胜感激任何帮助

0 个答案:

没有答案