DC.js图形标记

DC.js Graphing Tags

本文关键字：图形 js DC      更新时间：2023-10-29

使用示例数据

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是否有可能访问数组中的标记。用不同的方法计算总和会更好吗？

如果有帮助的话，下面是我用来创建带有多个标记的行图的代码。它应该与您的数据配合使用。

你可以在这里试试：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();
相关文章：