Question

我使用dc.js rowChart来显示在自定义reduceAdd / reduceRemove函数中计算的索引平均值，这一切都正常。现在，我想将rowChart更改为barChart，并且由于某种原因，valueAccessor在将鼠标悬停在图表中的条形（表示Index列）上时返回[object object]，而不是显示平均值。如果我在控制台中打印出avg值，则会正确定义。

我的csv文件结构如下：

Index,Model,Year,Season
Heat,Model1,1974,0
Heat,Model1,1974,1
Heat,Model1,1974,2
Heat,Model2,1974,3
Heat,Model2,1994,0
Heat,Model2,1994,1
Heat,Model2,1994,2
Heat,Model2,1994,3
Rain,Model1,1974,0
Rain,Model1,1974,1
Rain,Model1,1974,2
Rain,Model2,1974,3
Rain,Model2,1994,0
Rain,Model2,1994,1
Rain,Model2,1994,2
Rain,Model2,1994,3

这些是库的版本：

<script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.js"></script>
<script type="text/javascript" src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
<link rel="stylesheet" type="text/css" href="http://tvinci.github.io/webs/css/dc.css"/>

这是barChart和过滤器定义：

indexChart = dc.barChart("#chart-index");
var indexDimension = filter.dimension(function(d) { return d.Index; });
var indexGroup = indexDimension.group();
var avgIndexGroup = indexDimension.group().reduce(reduceAdd, reduceRemove, reduceInitial);

function reduceAdd(p, v) {
  ++p.count;
  p.total += v.value;
  p.average = p.total / p.count
  return p;
}

function reduceRemove(p, v) {
  --p.count;
  p.total -= v.value;
  p.average = p.total / p.count
  return p;
}

function reduceInitial() {
  return {count: 0, total: 0, average: 0};
}

最后，图表参数：

indexChart
.width(300).height(200)
.margins({ top: 10, right: 30, bottom: 30, left: 10 })    
.dimension(indexDimension)    
.group(avgIndexGroup)
.valueAccessor(function(p) { 
    //console.log("p.value.average: ", p.value.average) //displays the avg fine
    return p.value.average; 
})    
.elasticY(true)
.gap(0)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal); // Tell dc.js that we're using an ordinal x-axis;

indexChart.yAxis().ticks(4);

欢迎任何建议。提前谢谢！

dc.js barchart valueAccessor显示对象对象

0 个答案: