我创建了一个使用Dimensional Charting javascript library dc.js显示平均值的折线图。我正在显示行图，折线图和条形图。
当我选择一个类别时，然后是年度平均折线图和月份平均折线图显示。但是，当我选择一个特定年份和一个类别时，月份明智的平均折线图不会显示。
skuRowChart = dc.rowChart("#chart-row-spenders");
yearPieChart = dc.pieChart("#chart-pie-year");
yearLineChart = dc.lineChart('#Yearly-move-chart');
spendHistChart22 = dc.barChart("#chart-hist-spend22");
moveChart1 = dc.lineChart('#monthly-move-chart1');
function reduceAdd(p, v) {
++p.count;
p.total += v.sr;
p.average = p.total / p.count
return p;
}
function reduceRemove(p, v) {
--p.count;
p.total -= v.sr;
p.average = p.total / p.count
return p;
}
function reduceInitial() {
return {count: 0, total: 0, average: 0};
}
var parseDate = d3.time.format("%m/%d/%Y").parse;
var yearFormat = d3.time.format('%Y');
var monthFormat = d3.time.format("%m");
//var monthNameFormat = d3.time.format("%b");
var monthNameFormat = d3.time.format('%m.%b');
var
spendData = [
{ct:'KF', kw:'Amazon', sr: '35978',sd:'12/29/2016'},
{ct:'KF', kw:'Amazon', sr: '32178',sd:'11/2/2016'},
{ct:'KF', kw:'Amazon', sr: '30978',sd:'1/2/2017'},
{ct:'KF', kw:'Amazon', sr: '28978',sd:'1/15/2017'},
{ct:'KF',kw:'Build',sr:'28343',sd:'12/29/2016'},
{ct:'KF',kw:'Build',sr:'29653',sd:'11/29/2016'},
{ct:'KF',kw:'Build',sr:'26343',sd:'10/29/2016'},
{ct:'KF',kw:'Build',sr:'28343',sd:'2/2/2017'},
{ct:'KF',kw:'Build',sr:'28343',sd:'3/26/2017'},
{ct:'KF',kw:'Homedepot',sr:'221206',sd:'12/29/2016'},
{ct:'KF',kw:'Homedepot',sr:'203206',sd:'11/27/2016'},
{ct:'KF',kw:'Homedepot',sr:'193206',sd:'10/2/2016'},
{ct:'KF',kw:'wayfair',sr:'77794',sd:'12/29/2016'},
{ct:'KF',kw:'wayfair',sr:'71794',sd:'11/9/2016'},
{ct:'KF',kw:'wayfair',sr:'70794',sd:'1/9/2017'},
{ct:'KF',kw:'wayfair',sr:'74794',sd:'2/19/2017'},
{ct:'KF',kw:'wayfair',sr:'74794',sd:'3/21/2017'},
{ct:'KF',kw:'Houzz',sr:'408684',sd:'12/29/2016'},
{ct:'KF',kw:'Houzz',sr:'42684',sd:'11/22/2016'},
{ct:'KF',kw:'Houzz',sr:'46684',sd:'10/2/2016'},
{ct:'KF',kw:'Houzz',sr:'496684',sd:'1/2/2017'},
{ct:'KF',kw:'Houzz',sr:'49684',sd:'2/2/2017'},
{ct:'KF',kw:'Houzz',sr:'49664',sd:'3/2/2017'},
{ct:'KF',kw:'express',sr:'32004',sd:'12/29/2016'},
{ct:'KF',kw:'express',sr:'30004',sd:'11/2/2016'},
{ct:'KF',kw:'express',sr:'35004',sd:'10/2/2016'},
{ct:'KF',kw:'express',sr:'35004',sd:'12/2/2016'},
{ct:'KF',kw:'yahoo',sr:'115618',sd:'12/29/2016'},
{ct:'KF',kw:'yahoo',sr:'12546',sd:'10/2/2016'},
{ct:'KF',kw:'yahoo',sr:'65423',sd:'11/29/2016'},
{ct:'KF',kw:'yahoo',sr:'25698',sd:'10/29/2016'},
{ct:'KF',kw:'google',sr:'404991',sd:'1/29/2017'},
{ct:'KF',kw:'google',sr:'404991',sd:'2/2/2017'},
{ct:'KF',kw:'google',sr:'404991',sd:'3/12/2017'},
{ct:'KF',kw:'google',sr:'404991',sd:'3/3/2017'},
{ct:'KF',kw:'pingserach',sr:'273944',sd:'12/29/2016'}
];
// d3.csv("hhh.csv", function (error, salesrank) {
spendData.forEach(function (d) {
d.sr = +d.sr;
d.Date = parseDate(d.sd);
d.Year = yearFormat(d.Date);
d.Month = monthNameFormat(d.Date);
});
var ndx = crossfilter(spendData);
var all = ndx.groupAll();
SkuDim = ndx.dimension(function (d) {return d.kw; });
spendPerSku = SkuDim.group().reduceCount();
yearDim = ndx.dimension(function (d) {return d.Year; });
year_total = yearDim.group().reduceCount(function (d) {return d.sr;});
exptAvgGroup = yearDim.group().reduce(reduceAdd, reduceRemove, reduceInitial);
monthDim = ndx.dimension(function (d) {return d.Month; });
exptAvgGroup11 = monthDim.group().reduce(reduceAdd, reduceRemove, reduceInitial);
month_total = monthDim.group().reduceCount(function (d) { return d.sr;});
skuRowChart
.width(350)
.height(300)
.dimension(SkuDim)
.group(spendPerSku)
.elasticX(true)
.x(d3.scale.linear().domain([6, 20]))
.ordering(function (d) {
return -d.value
})
// .cap(40)
//.margins({top: -30, left: 0, right: 0, bottom: 0})
.controlsUseVisibility(true);
skuRowChart.data(function (group) {
return group.top(50);
});
yearPieChart
.width(250).height(250)
.dimension(yearDim)
.group(year_total)
.innerRadius(60)
.controlsUseVisibility(true);
yearLineChart
.width(380)
.height(280)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderArea(true)
.valueAccessor(function (p) {
//console.log("p.value.average: ", p.value.average) //displays the avg fine
return d3.round(p.value.average, 0);
})
//.brushOn(true)
.elasticY(true)
.xAxisLabel('Years')
.yAxisLabel('Review Count')
//.dimension(moveMonths)
.dimension(yearDim)
.group(exptAvgGroup)
//.margins({ top: 10, left: 60, right:40, bottom: 60 })
.margins({top: 0, left: 60, right: 30, bottom: 60})
spendHistChart22
.width(400).height(280)
.dimension(monthDim)
//.dimension(dateeddim)
// .group(dateeddimGroup)
.group(month_total)
.xAxisLabel('Months')
.yAxisLabel('')
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.ordering(function(d) { return d.key })
.elasticX(true)
.elasticY(true)
.margins({ top: 10, left: 60, right: 40, bottom: 60 })
.controlsUseVisibility(true)
spendHistChart22.xAxis().tickFormat(d => d.substr(3))
moveChart1
.width(380)
.height(310)
//.x(d3.scale.ordinal().domain(map(function (d) {return d.Month;})))
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.valueAccessor(function (p) {
//console.log("p.value.average: ", p.value.average) //displays the avg fine
return d3.round(p.value.average, 0);
})
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderArea(true)
//.clipPadding(10)
//.brushOn(false)
.elasticY(true)
.xAxisLabel('Months')
.yAxisLabel('')
.dimension(monthDim)
.group(exptAvgGroup11)
.margins({top: 40, left: 60, right: 30, bottom: 60})
moveChart1.xAxis().tickFormat(d => d.substr(3))
dc.renderAll();
答案 0 :(得分：2)
每当你除以可能为零的东西时，你必须要小心。
dc.js不会非常清理你的数据，所以当你看到一张空白的图表时，它可能是糟糕的数据。
在没有尝试调试任何内容的情况下，我尝试修复了第一个突出显示的内容，p.count的那些不检查p.count是否为零的内容。
当计数为零时，您可能希望平均值降至零。 （从技术上来说，我认为这条线应该存在差距，但除非你感兴趣，否则我不会进入那里。）
这似乎解决了这个问题：
function reduceAdd(p, v) {
++p.count;
p.total += v.sr;
p.average = p.count ? p.total / p.count : 0;
return p;
}
function reduceRemove(p, v) {
--p.count;
p.total -= v.sr;
p.average = p.count ? p.total / p.count : 0;
return p;
}
你小提琴的叉子：https://jsfiddle.net/gordonwoodhull/q4aquukz/1/
你是否愿意指出你得到错误代码的例子，所以我可以纠正它或留下评论？