Javascript d3.js:5942错误：<；的值无效；g>；属性转换="；翻译（NaN，0）"；

使用d3.js v3.55、crossfilter.js v1.311和dc.js v1.73并尝试构建一个reduce函数，该函数返回平均值，而不是求和或计数。内置的reduceSum运行良好，但当我尝试添加自己的reduce函数时，基于互联网上的许多示例。我收到以下信息： d3.js:5942错误：属性transform=“translate（NaN，0）”的值无效 d3.js:8718错误：属性width=“NaN”的值无效

以下是我在不删除任何重要信息的情况下尽可能减少的代码：

<script type="text/javascript">
//
// Create the Chart Objects
//
var GeoZoneChart               = dc.rowChart("#chart-geo-zone");
var pdcData = [
{GeoZone: 'New York Metro', PDCLast365: 0.43}, 
{GeoZone: 'New York Metro', PDCLast365: 0.427}, 
{GeoZone: 'New York Metro', PDCLast365: 0.418}, 
{GeoZone: 'Los Angeles Metro', PDCLast365: 0.4085}, 
{GeoZone: 'Los Angeles Metro', PDCLast365: 0.40565}, 
{GeoZone: 'Chicago Metro', PDCLast365: 0.46789457}, 
{GeoZone: 'Chicago Metro', PDCLast365: 0.46366023}, 
{GeoZone: 'Chicago Metro', PDCLast365: 0.447781455}
];
//
// normalize/parse data
//   in this case, turn the decimel into a percentage
pdcData.forEach(function(d) {
    d.PDCLast365 = d.PDCLast365 * 100;
    d.PDCLast365 = d.PDCLast365.toFixed(2);
});

function isNumeric(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

function reduceAddAvg(attr) {
  return function(p,v) {
    if (isNumeric(v[attr]) ){
        ++p.count;
        p.sum += v[attr];
        p.avg = p.sum/p.count;
    }
    return p;
  };
}
function reduceRemoveAvg(attr) {
  return function(p,v) {
    if (isNumeric(v[attr]) ){
        --p.count;
        p.sum -= v[attr];
        p.avg = p.sum/p.count;
    }
    return p;
  };
}
function reduceInitAvg() {
  return {count:0, sum:0, avg:0};
}

//
// set crossfilter
//
var ndx = crossfilter(pdcData),
    GeoZoneDim           = ndx.dimension(function(d) {return d.GeoZone;}),
    PDCLast365PerGeoZone = 
          GeoZoneDim.group().reduce(
            reduceAddAvg('PDCLast365'), 
            reduceRemoveAvg('PDCLast365'), 
            reduceInitAvg);


GeoZoneChart
    .width(400).height(200)
    .dimension(GeoZoneDim)
    .group(PDCLast365PerGeoZone)
    .elasticX(true);

dc.renderAll();
</script>

//
//创建图表对象
//
var GeoZoneChart=dc.rowChart（#chart geo zone”）；
变量数据=[
{地理区域：“纽约地铁”，PDCLast365:0.43}，
{地理区域：“纽约地铁”，PDCLast365:0.427}，
{地理区域：“纽约地铁”，PDCLast365:0.418}，
{地理区域：“洛杉矶地铁”，PDCLast365:0.4085}，
{地理区域：“洛杉矶地铁”，PDCLast365:0.40565}，
{地理区域：“芝加哥地铁”，PDCLast365:0.46789457}，
{地理区域：“芝加哥地铁”，PDCLast365:0.46366023}，
{地理区域：“芝加哥地铁”，PDCLast365:0.447781455}
];
//
//规范化/解析数据
//在这种情况下，将小数转换为百分比
pdcData.forEach（功能（d）{
d、 PDCLast365=d.PDCLast365*100；
d、 PDCLast365=d.PDCLast365.toFixed（2）；
});
函数为数字（n）{
return！isNaN（parseFloat（n））和&isFinite（n）；
}
函数reducedavg（attr）{
返回函数（p，v）{
if（isNumeric（v[attr]））{
++p、 计数；
p、 总和+=v[attr]；
p、 平均值=p.sum/p.count；
}
返回p；
};
}
函数还原移动平均值（属性）{
返回函数（p，v）{
if（isNumeric（v[attr]））{
--p、 计数；
p、 总和-=v[attr]；
p、 平均值=p.sum/p.count；
}
返回p；
};
}
函数reduceInitAvg（）{
返回{count:0，sum:0，avg:0}；
}
//
//设置交叉滤波器
//
var ndx=交叉过滤器（pdcData），
GeoZoneDim=ndx.dimension（函数（d）{返回d.GeoZone；}），
PDCLast365PerGeoZone=
GeoZoneDim.group（）.reduce(
reduceADVG（'PDCLast365'），
还原移动平均值（'PDCLast365'），
还原镍；
地理区划
.宽度（400）.高度（200）
.尺寸（GeoZoneDim）
.组（PDCLast365PerGeoZone）
.elasticX（正确）；
dc.renderAll（）；

当

p.count

降至零时，您需要一个防护装置。因此：

function reduceRemoveAvg(attr) {
  return function(p,v) {
    if (isNumeric(v[attr]) ){
        --p.count;
        p.sum -= v[attr];
        p.avg = p.count ? p.sum/p.count : 0;
    }
    return p;
  };
}

如果您可以在SO或dc.js网站或用户组上指出任何此类糟糕的示例，则不胜感激

编辑：我不确定它在这里会有什么效果，但实际上返回的是一个字符串，而不是一个数字。您的

isNumeric

测试值是否可以转换为数字，而不是它是否是数字。因此，您可能会以字符串连接而不是加法结束

---

正如我在下面所说的，正确的方法是在reduce函数中设置断点，并查看实际计算的内容。

当范围不是数组时，我通常会得到该错误

---

检查

.range

接收的变量是否为实际数组

Hi Gordon，谢谢您的回复。我已经在添加项上检查过了，但忘记在删除项上检查。原始示例也没有数字检查。但是，我仍然有相同的错误消息。盲目调试这些东西是没有用的。和往常一样的建议是：1。在绘制图表之前设置一个断点，并查看

PDCLast365PerGeoZone.all（）

是否具有NAN。2.如果是这样，请在每个reduce函数的末尾放置断点，并查看生成nan的原因。或者做一把小提琴，我或者其他有帮助的人也会这么做。在上面添加了另一个线索。你为什么反对这个？这就是发生在我身上的事！