d3.js：5942錯誤：的值無效 <g> 屬性transform =“ translate（NaN，0）”

Question

使用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>

Answer 1

當p.count降至零時，您需要一個保護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網站或用戶組上指出任何此類不良示例，則必須這樣做。

編輯：我不確定它將在這里產生什么效果，但是toFixed（）實際上返回一個字符串，而不是一個數字。 然后您的isNumeric測試值是否可以轉換為數字，而不是是否為數字。 因此，您可能最終得到的是字符串連接而不是加法。

就像我在下面說的那樣，解決這個問題的正確方法是在reduce函數中放置斷點，然后查看實際計算的內容。

Answer 2

當范圍不是數組時，我通常會收到該錯誤。

檢查.range接收的變量是否為實際數組