图例切换为d3.js饼图

在这个例子中，我试图在用户点击图例组件时切换切片。它将首先将完整的数据作为其来源，但如果有以前操作的数据源将使用它作为基础。我试图在图例被操纵时钩入切换功能。我宁愿将功能分开 - 但不知道如何知道切片是否处于活动状态。

虽然它没有像预期的那样工作，尤其是当试图处理多个活动/非活动切片时。

onLegendClick: function(dt, i){ 
        //_toggle rectangle in legend 

var completeData = jQuery.extend(true, [], methods.currentDataSet); 




        newDataSet = completeData;       
        if(methods.manipulatedData){ 
         newDataSet = methods.manipulatedData; 
        } 


        d3.selectAll('rect') 
        .data([dt], function(d) { 
         return d.data.label; 
        }) 
        .style("fill-opacity", function(d, j) { 
         var isActive = Math.abs(1-d3.select(this).style("fill-opacity")); 
         if(isActive){ 
          newDataSet[j].total = completeData[j].total;         
         }else{ 
          newDataSet[j].total = 0;        
         } 

         return isActive; 
        });        

        //animate slices 
        methods.animateSlices(newDataSet); 

        //stash manipulated data 
        methods.manipulatedData = newDataSet; 

       }

来源

2014-10-22 The Old County

我需要找出隐藏的标签，当片被设置为0的方式 - 所以没有发生重叠。 – 2014-10-22 17:18:18

这里是标签/指针在0值切片上隐藏的版本。 http://jsfiddle.net/Qh9X5/3321/ – 2014-10-23 13:56:04

http://jsfiddle.net/Qh9X5/3324/最新版本23/10/2014 – 2014-10-24 11:20:33

这里是onLegendClick功能。

当用户单击时，我正在切换矩形内部填充的不透明度。

我试着修改相应的数据值 - 尽管它没有处理多个切换。

http://jsfiddle.net/Qh9X5/3324/ 理想情况下，如果用户试图停用所有切片，我希望它重置图表并恢复过程中的所有切片。会热衷于简化代码，并可能分开图例中矩形样式的逻辑和表示层。

线234

onLegendClick: function(dt, i){ 
        //_toggle rectangle in legend 

        var completeData = jQuery.extend(true, [], methods.currentDataSet); 

        newDataSet = completeData;       
        if(methods.manipulatedData){ 
         newDataSet = methods.manipulatedData; 
        } 


        d3.selectAll('rect') 
        .data([dt], function(d) { 
         return d.data.label; 
        }) 
        .style("fill-opacity", function(d, j) { 
         var isActive = Math.abs(1-d3.select(this).style("fill-opacity")); 
         if(isActive){ 
          newDataSet[j].total = completeData[j].total;         
         }else{ 
          newDataSet[j].total = 0;        
         } 

         return isActive; 
        });        



        //animate slices 
        methods.animateSlices(newDataSet); 

        //stash manipulated data 
        methods.manipulatedData = newDataSet; 

       }

来源

2014-10-23 14:08:06

图例切换为d3.js饼图

回答

相关问题