使用D3,DC和crossfilter进行条形图到饼图转换,图例百分比不会更新

时间:2015-07-21 14:09:25

标签: javascript d3.js charts

我正在使用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;

} 

0 个答案:

没有答案