javascript - DC.js 绘图标签

Question

带有示例数据

var data = [
    {Name: 'Mr A', Spent: 40, Year: 2011, tags: ['a', 'b', 'c']},
    {Name: 'Mr B', Spent: 10, Year: 2011, tags: ['c']},
    {Name: 'Mr C', Spent: 40, Year: 2011, tags: ['a']},
    {Name: 'Mr A', Spent: 70, Year: 2012, tags: ['c', 'b']},
    {Name: 'Mr B', Spent: 20, Year: 2012, tags: ['b']},
    {Name: 'Mr B', Spent: 50, Year: 2013, tags: ['a', 'b', 'c']},
    {Name: 'Mr C', Spent: 30, Year: 2013, tags: ['a', 'b']}
];

我正在尝试创建一个 dc.js 行图表来显示每个唯一标签并允许我减少每个标签绘制的值。到目前为止，我有这段代码可以让我将标签减少到他们花费的金额:

function reduceAdd(p, v) {
  v.tags.forEach (function(val, idx) {
     p[val] = (p[val] || 0) + v.Spent;
  });
  return p;
}

function reduceRemove(p, v) {
   v.tags.forEach (function(val, idx) {
     p[val] -= v.Spent;
  });
  return p;
}

function reduceInitial() {
  return {};  
}
var tagsDim = ndx.dimension(function(d)  {return d.tags; } );
tagsGroup = tagsDim.groupAll().reduce(reduceAdd, reduceRemove, reduceInitial);
console.log(tagsGroup.value())
'{ a: 160, b: 210, c: 170 }'

这正确地给出了减少的总和。但是，因为这是一个 groupAll 对象 dc.js 无法绘制它，所以我不太确定从这里去哪里。 dc.js 是否有可能访问数组中的标签。以不同的方式计算总和会更好吗？

Answer 1

如果有帮助，下面是我用来创建具有多个标签的行图的代码。它应该适用于您的数据。

你可以在这里试一试:http://jsfiddle.net/ewm76uru/30/

var data = [
{id:1, author:'foo', tags: ['tag1','tag2','tag3']},
{id:2, author:'foo', tags: ['tag3']},
{id:3, author:'foo', tags: ['tag1']},
{id:4, author:'bar', tags: ['tag2','tag3']},
{id:5, author:'bar', tags: ['tag3']},
{id:6, author:'bar', tags: ['tag2','tag3']},
{id:7, author:'bar', tags: ['tag1','tag2']}
]; 

    var content=crossfilter(data);

    // table
    var idDimension = content.dimension(function (d) { return d.id; });
    var table = dc.dataTable("#idtable");
    table.dimension(idDimension)
        .group(function(d){ return "ITEMS" })
        .columns([
            function(d){return d.id+" : "; },
    function(d){return d.author+" "},
            function(d){return d.tags;},
        ])

    // author chart
    var authorDimension = content.dimension(function (d) { return d.author; });
    var authorgroup = authorDimension.group().reduceSum(function(d) { return 1; })
    authorChart = dc.rowChart('#idauthor');
    authorChart
        .width(300)
        .renderLabel(true)
        .gap(2)
        .margins({top: 10, left: 10, right: 20, bottom: 40})
        .group(authorgroup)
        .dimension(authorDimension)
        .elasticX(true)
        .transitionDuration(1000)
        .colors(d3.scale.category10())
        .label(function (d) { return d.key })
        .xAxis().ticks(5);

    // tags chart
    function reduceAdd(p, v) {
        v.tags.forEach (function(val, idx) {
            p[val] = (p[val] || 0) + 1; //increment counts
        });
        return p;
    }

    function reduceRemove(p, v) {
        v.tags.forEach (function(val, idx) {
            p[val] = (p[val] || 0) - 1; //decrement counts
        });
        return p;
    }

    function reduceInitial() {
        return [];
    }


    var tags = content.dimension(function (d) { return d.tags });
    var tags2 = content.dimension(function (d) { return d.tags });
    var groupall = tags.groupAll();
    var tagsGroup = groupall.reduce(reduceAdd, reduceRemove, reduceInitial).value();
    tagsGroup.all = function() {
        var newObject = [];
        for (var key in this) {
            if (this[key] && key != "all") {
                newObject.push({
                    key: key,
                    value: this[key]
                });
            }
        }
        return newObject;
    }

    var tagsChart = dc.rowChart("#idtags")
    tagsChart
        .width(400)
        .height(200)
        .renderLabel(true)
        .labelOffsetY(10)
        .gap(2)
        .group(tagsGroup)
        .dimension(tags2)
        .elasticX(true)
        .transitionDuration(1000)
        .colors(d3.scale.category10())
        .label(function (d) { return d.key })
        .on("filtered", function(c,f) {
            //tags2.filter(f)
        })
        .filterHandler (function (dimension, filters) {
            dimension.filter(null);
            dimension.filterFunction(function (d) {
                for (var i=0; i < filters.length; i++) {
                    if (d.indexOf(filters[i]) <0) return false;
                }
                return true;
            });



            return filters;
        })
    .xAxis().ticks(5);

    dc.renderAll();