我正在使用D3和DC,并且当我点击每个栏时,交叉滤波器使条形图变为饼图转换,右侧的传说问题不会更新...请让我的jsfiddle。 http://jsfiddle.net/2sgLjbvu/7/
data is {Supplier:"Supplier A",val: {WIP:"500",Conv:"400",PP:"20",LL:"20"}}
function legend(lD){
leg={};
//create table for legend
var lgend = d3.select(id)
.append("table")
.attr("class","legend");
//create one row per segment
var tr = lgend.append("tbody")
.selectAll("tr")
.data(lD)
.enter()
.append("tr");
//create the first column for each segment
tr.append("td")
.append("svg")
.attr("width","16")
.attr("height","16")
.append("rect")
.attr("width","16")
.attr("height","16")
.attr("fill",function(d){return segColor(d.type);});
//create the second column for each segment
tr.append("td")
.text(function(d){return d.type;});
//create the third col
tr.append("td")
.attr("class","legendFreq")
.text(function(d){return d3.format(",")(d.val);});
//create the perc col
tr.append("tr")
.attr("class","legendPerc")
.text(function(d){return getLegend(d,lD);});
//utility func to be used to update the legend
leg.update = function(nD){
var l = lgend.select("tbody")
.selectAll("tr")
.data(nD);
l.select(".legendFreq")
.text(function(d){return d3.format(",")(d.val);});
l.select(".legendPerc")
.text(function(d){return getLegend(d,nD);});
};
function getLegend(d,aD){//utility func to compute perc
return d3.format("%")(d.val/d3.sum(aD.map(function(v){return v.val;})));
}
return leg;
}