Question

我正在处理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;

                }

Answer 1

这是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;

                }

图例为d3.js饼图切换

1 个答案: