【发布时间】:2015-12-09 20:11:56
【问题描述】:
我正在尝试在我的一张 dc 图表中计算和绘制百分比 (%)。
我已阅读 API 和多个关于 reduce 函数的示例(添加、删除和初始化等) 我的代码参考了1st 和2nd。
我想计算衰减百分比( sum(decay_data)/sum(all_data) ;decay_data 在数据中由 "decay_ind==1" 定义)
由于某些问题,我仍然没有在图表中得到任何东西,也使用了值访问器,但是这可能存在一些问题。
在代码中,请只看“percentgroup”和“datedimension”,其他是单独的图表。
到目前为止我的代码:
var chart = dc.pieChart("#test");
var chart2 = dc.barChart("#test2");
var chart3 = dc.barChart("#test3");
console.log(data[0]);
//Filtering only target population
data = data.filter(function (d) { return d.target_ind == "1"; });
var ndx = crossfilter(data);
bucketDimension = ndx.dimension(function(d) {return "Bucket : " +d.decay_bucket;});
speedSumGroup = bucketDimension.group().reduceSum( function(d) { return d.Count ;});
dateDimension = ndx.dimension(function(d) {return d.duration ;});
rechGroup = dateDimension.group().reduceSum ( function(d) { return d.recharge_revenue ;});
var percentGroup = dateDimension.group().reduce(
//add
function(p, v) {
++p.count;
p.decay += (v.decay_ind === '1' ? p.recharge_revenue : 0);
p.total += p.recharge_revenue;
p.percent = p.count ? p.decay/p.total : 0;
return p;
},
function(p, v) {
--p.count;
p.decay -= (v.decay_ind === '1' ? p.recharge_revenue : 0);
p.total -= p.recharge_revenue;
p.percent = p.count ? p.decay/p.total : 0;
return p;
},
function() {
return {
count: 0,
decay : 0,
total : 0,
percent : 0
};
}
);
chart3
.width(768)
.height(480)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
//.brushOn(false)
.yAxisLabel("Decay %")
.dimension(dateDimension)
//.group(decayGroup)
.on('renderlet', function(chart) {
chart.selectAll('rect').on("click", function(d) {
console.log("click!", d);
});
});
chart3.valueAccessor(function (p) {
return p.value.percent;
})
.group(percentGroup);
我在这里错过了什么? 任何方法/建议都会非常有帮助。
更新
好的,我已经更正了一些错误,现在,我只是想获得总和以更好地理解这些函数并在控制台中查看它们。还添加了持续时间维度中的所有值。
我在控制台中总结了一个名为“充值收入”的变量 - add 函数为我提供了随机/垃圾值。删除函数给了我无穷大。
我的新代码:
var percentGroup = dateDimension.group().reduce(
//add
function(p, v) {
++p.count;
p.total += v.recharge_revenue;
//p.percent = p.count ? p.decay/p.total : 0;
console.log(p.total);
return p;
},
//remove
function(p, v) {
--p.count;
p.total -= v.recharge_revenue;
return p;
},
//init
function() {
return {
count: 0,
total : 0,
};
}
);
chart3
.width(768)
.height(480)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
//.brushOn(false)
.yAxisLabel("Decay %")
.dimension(dateDimension)
.valueAccessor(function (p) {
return p.value.total;
})
.group(percentGroup)
.on('renderlet', function(chart) {
chart.selectAll('rect').on("click", function(d) {
console.log("click!", d);
});
});
由于明显的原因,图表仍然是空的(控制台显示)
请帮我解决这个问题,我就是不明白这里出了什么问题。求和完成后,我想计算百分比。
另一个警告:我的数据集 (csv) 中有一个“计数”列,这是否会导致这里出现问题? (换了别的名字,还是不行)
基本上,唯一有效的方法是 count 在图表中,如果我使用任何总和、平均值,我会得到随机值并且没有图表。
欢迎任何建议/反馈。
更新 2:
这是fiddle
数据集有两个桶和两个持续时间
它显示了总和平均值的垃圾/随机值。请立即帮我解决问题。
【问题讨论】:
-
你得到了什么价值?在reduce函数中设置断点/日志,或者跟踪图表初始化的
percentGroup.all()。 -
我怀疑数据和相等比较或有序性存在问题。你的衰减指示器是一个字符串吗?如果它是一个数字,它永远不会 === '1'。持续时间总是有价值吗?否则,您的日期维度将不会有序。我还建议在值访问器中进行实际的 % 计算。无需在每次调用 reducer 时都运行该计算。
-
@G :图表为空,没有值。 (只能看到 x,y 轴)@EthanJewett:你是对的,持续时间在任何地方都没有值,因为我只是在测试。是的,衰减指示器作为字符串导入,测试了 '1' 和 1,两者都不起作用。你能分享一个如何计算内部值访问器的例子吗,我试过了,但不能再工作了
-
访问器内部的计算不是问题,只是一个建议。缺少持续时间值可能是问题所在。您应该测试访问器中的缺失值。请将您看到的这个问题的一个工作示例放在一起(使用 JSfiddle 或类似的东西),我们将能够为您提供帮助。
-
@EthanJewett :这是小提琴:jsfiddle.net/vct0dzou/23 我已经添加了我的代码和数据集类型,它给出了随机/垃圾值,包括总数和平均值,它在这里绘制饼图少量的值。您现在可以帮忙解决问题吗?
标签: javascript bar-chart dc.js crossfilter