は、dc.jsを使用して序盤の棒グラフを作成できます。

Question

dc.jsを使用してx軸の序数値を持つ棒グラフを作成し、ブラシを有効にしようとしています。

ブラシは、バブルチャートや行グラフなどの他のグラフをフィルタリングするために使用されます...私はすべてのグラフを作成することができましたが、主な問題は選択されたものに従って他のグラフをフィルタリングできない他のグラフでは、ブラシで棒グラフをフィルタリングできます。

私はこの問題でこれを起動するためのbrush on ordinal barchart dc.js

Answer 1

感謝をフィドルからのコードを使用しています。引用されたチケットで私が与えた解決策は不完全で、私はそれを更新しました。

ブラシを表示するために使用される戻り値はfilterFunctionと考えられていました。実際にフィルタを適用しなかったのは、filterFunctionの主な目的です！

2つの変更が必要です。まず、フィルタ配列が空であるかどうかを確認し、その場合はディメンションのフィルタをクリアする必要があります。次に、得られたフィルタを次元に適用する必要があります。我々はまた

kpiMoveChart.filterHandler(function(dimension, filters) { 
    if(filters.length === 0) { 
     dimension.filter(null); 
     return filters; 
    } 
    // actually should only contain one filter but use .map as a convenience 
    var filters2 = filters.map(function(rangefilt) { 
     var low = keys[Math.ceil(rangefilt[0])], high = keys[Math.ceil(rangefilt[1])] || 'zzzz'; 
     return dc.filters.RangedFilter(low,high); 
    }); 
    dimension.filterRange(filters2[0]); 
    return filters2; 
}); 

を取得

ので、代わりの

chart.filterHandler(function(dimension, filters) { 
    return filters.map(function(rangefilt) { 
    var low = keys[Math.ceil(rangefilt[0])], high = keys[Math.ceil(rangefilt[1])] || 'zzz'; 
    return dc.filters.RangedFilter(low,high); 
    }); 
}); 

、あなたは一つの小さなタイプミスがあった：代わりにkeys[Math.ceil(rangefilt[1]) || 'zzzz']のそれはあなたのバブルチャートでは、最後にkeys[Math.ceil(rangefilt[1])] || 'zzzz'

する必要があり、チャートのドメインを変更するには、通常、yAxisMinと友だちを上書きする必要はありません。あなたがドメインを修正したい場合には、弾性をオフにして、直接ドメインを設定することがはるかにエレガントです：

kpiBubbleChart 
    .y(d3.scale.linear().domain([-10, 160])) 

を（xAxisMinとxAxisMaxをオーバーライドすると、そのスケールは序数であるため、任意の効果を持っているように見えるので、それはいつもだしませんでした。あなたは、コードが含まれていなかったので、おそらく近い投票があるhttps://jsfiddle.net/gordonwoodhull/g34Ldwaz/9/