图例切换为d3.js饼图
问题描述:
我正在研究d3.js应用程序。图例切换为d3.js饼图
在这个例子中,我试图在用户点击图例组件时切换切片。它将首先将完整的数据作为其来源,但如果有以前操作的数据源将使用它作为基础。我试图在图例被操纵时钩入切换功能。我宁愿将功能分开 - 但不知道如何知道切片是否处于活动状态。
虽然它没有像预期的那样工作,尤其是当试图处理多个活动/非活动切片时。
http://jsfiddle.net/Qh9X5/3282/
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;
}
答
这里是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;
}
我需要找出隐藏的标签,当片被设置为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