DC.js图形化标记
DC.js图形化标记
提问于 2015-02-15 05:09:31
使用示例数据
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有没有可能访问数组中的标记。用不同的方法计算总和会不会更好？
回答 1
Stack Overflow用户
发布于 2015-03-01 22:48:50
如果有帮助，下面是我用来创建具有多个标记的行图的代码。它应该和你的数据一起工作。
你可以在这里尝试一下：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();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28520353
复制相关文章
相似问题
腾讯云开发者
