dc.js - ブラシを使用しているときに "TypeError：_xが定義されていません"

Question

dc.jsで実現した一連のチャートに問題が残っています。

問題は、メインのdc.jsサイトのNasdaqの例に似ています。ブラシで棒グラフを使用してフィルタリングされたスタックチャート。

問題は、すべてをロードした後にブラシを使用してピリオドを選択しようとすると、コンソールにエラーが表示されるということです。 Firefoxので

私はこの取得：Chromeで私はこれを取得しながら

TypeError: _x is undefined[Learn More] coordinate-grid-mixin.js:468:12 
    prepareXAxis coordinate-grid-mixin.js:468:12 
    drawChart coordinate-grid-mixin.js:1139:8 
    _dc/dc.coordinateGridMixin/_chart._doRedraw coordinate-grid-mixin.js:1128:8 
    _dc/dc.baseMixin/_chart.redraw base-mixin.js:743:21 
    _dc/dc.redrawAll core.js:250:8 
    _dc/dc.baseMixin/_chart.redrawGroup base-mixin.js:794:12 
    _dc/dc.coordinateGridMixin/_chart._brushing/< coordinate-grid-mixin.js:1032:16 
    _dc/dc.events.trigger/< events.js:34:12 

を：

Uncaught TypeError: Cannot read property 'domain' of undefined 
    at prepareXAxis (coordinate-grid-mixin.js:468) 
    at drawChart (coordinate-grid-mixin.js:1139) 
    at Object._chart._doRedraw (coordinate-grid-mixin.js:1128) 
    at Object._chart.redraw (base-mixin.js:706) 
    at Object.dc.redrawAll (core.js:250) 
    at Object._chart.redrawGroup (base-mixin.js:757) 
    at coordinate-grid-mixin.js:1032 
    at events.js:34 

私は別のdc.jsのバージョンを試してみましたが、私は安定した2.0から同じ問題を（得ます。 5から2.1.9以上のログに使用されている最後のログまで）。私がdc.min.jsバージョンで得た唯一の違いは、 "undefined _x"の代わりに "undefined z"があることです。ここで

だけで気持ち取得する画像です：問題の良い部分今

を、チャートが正常に動作していることです。私はデータを視覚化してフィルタリングすることができますが、コンソールはすぐに表示される同じエラーでいっぱいになります。ここ

は私のコードの多くの関連部分です：

// a bit of copy paste to get the sense 
var dateDim = ndx.dimension(function (d) { return d.date; }); 
var grpTime = 
    dateDim 
     .group(function (d) { return d3.time.minute(d); }) 
     .reduce(dash_reduceAdd, dash_reduceSub, dash_reduceInit); 

var minDate = d3.time.minute(dateDim.bottom(1)[0]["date"]); 
var maxDate = d3.time.minute(dateDim.top(1)[0]["date"]); 

stackChart 
    .renderArea(true) 
    .height(200) 
    .margins({top: 15, right: 50, bottom: 20, left: 40}) 
    .x(d3.time.scale().domain([minDate, maxDate])) 
    .xUnits(d3.time.minutes) 
    .legend(dc.legend().x(70).y(20).itemHeight(13).gap(5)) 
    .renderHorizontalGridLines(true) 
    .title(stackChartTitle) 
    .elasticY(true) 
    .transitionDuration(1500) 
    .dimension(dateDim) 
    .group(grpTime, str_a) 
    .valueAccessor(function(d) { return d.value.val_a_Avg; }) 
    .stack(grpTime, str_b, function(d) { return d.value.val_b_Avg; }) 
    .ordinalColors(['#4faf00', '#5c00e6']) 
    .hidableStacks(true) 
    .rangeChart(volumeChart) 
    .controlsUseVisibility(true) 
    .brushOn(false) 
; 

volumeChart 
    .height(60) 
    .margins({top: 0, right: 50, bottom: 20, left: 40}) 
    .dimension(dateDim) 
    .group(grpTime) 
    .valueAccessor(function(d) { return d.value.vAvg; }) 
    .centerBar(true) 
    .gap(1) 
    .x(d3.time.scale().domain([minDate, maxDate])) 
    .xUnits(d3.time.minutes) 
    .elasticY(true) 
    .alwaysUseRounding(true) 
    .on('renderlet', function (chart) { 
     var rangeFilter = chart.filter(); 
     var focusFilter = chart.focusChart().filter(); 
     if (focusFilter && !rangeFilter) { 
      dc.events.trigger(function() { 
       chart.focusChart().replaceFilter(rangeFilter); 
      }); 
     } 
    }) 
    .brushOn(true) 
    .controlsUseVisibility(true) 
; 

stackChart.render(); 
volumeChart.render(); 

すべてのヘルプは本当に私はこの問題を解決するために移動する方法を実際に確認していない、認識されるであろう。

EDIT 私はここに抑えるための機能を追加してい：

function groupArrayAdd(keyfn) { 
    var bisect = d3.bisector(keyfn); 
    return function(elements, item) { 
     var pos = bisect.right(elements, keyfn(item)); 
     elements.splice(pos, 0, item); 
     return elements; 
    }; 
} 
function groupArrayRemove(keyfn) { 
    var bisect = d3.bisector(keyfn); 
    return function(elements, item) { 
     var pos = bisect.left(elements, keyfn(item)); 
     if(keyfn(elements[pos])===keyfn(item)) 
      elements.splice(pos, 1); 
     return elements; 
    }; 
} 
// Custom reduce functions 
function dash_reduceAdd(p, v) { 
    ++p.count; 
    // Sums 
    p.val_a_Sum += v.va; 
    p.val_b_Sum += v.vb; 
    // Averages 
    p.val_a_Avg = p.count ? p.val_a_Sum/p.count : 0; 
    p.val_b_Avg = p.count ? p.val_b_Sum/p.count : 0; 
    // Maxes 
    p.vaMax = groupArrayAdd(function (d) { return d.va; })(p.vaMax, v.va); 
    p.vbMax = groupArrayAdd(function (d) { return d.vb; })(p.vbMax, v.vb); 
    return p; 
} 
function dash_reduceSub(p, v) { 
    --p.count; 
    // Sums 
    p.val_a_Sum -= v.va; 
    p.val_b_Sum -= v.vb; 
    // Averages 
    p.val_a_Avg = p.count ? p.val_a_Sum/p.count : 0; 
    p.val_b_Avg = p.count ? p.val_b_Sum/p.count : 0; 
    // Maxes 
    p.vaMax = groupArrayAdd(function (d) { return d.va; })(p.vaMax, v.va); 
    p.vbMax = groupArrayAdd(function (d) { return d.vb; })(p.vbMax, v.vb); 
    return p; 
} 
function dash_reduceInit() { 
    return { count:0, 
      val_a_Sum:0, val_b_Sum:0, 
      val_a_Avg: 0, val_b_Avg: 0, 
      vaMax: [], vbMax:[] }; 
} 

Answer 1

私は問題は、それを引き起こしました。本当にかなり時間がかかりました。コードを逆アセンブルして、別の部分を削除して、問題が解決しないかどうかを確認しました...

...最後に私は本当に愚かな問題を発見しました。宣言されたものの、決してレンダリングされなかったlineChart変数を1つ取り除くのを忘れてしまった...私はそれ以前に気付かなかったが、そのチャートを削除した後、問題は消えた。

コードから解決策を見つけることは不可能でした。このエラーメッセージを持っている将来の人々の手がかりになるかもしれないと私は答えています。