DC.jsバブルチャート - x軸とy軸のテキストを使用

Question

私はこれにかなり新しいです。私はDC.jsライブラリを使用してバブルチャートを作成する方法を理解しようとしています。なぜなら、他のすべての行グラフがクロスフィルタリングされているので、私はDC.jsライブラリを使用しているからです。行グラフで棒を選択すると、バブルチャートを横方向にもフィルタリングする必要があります。

現在、私はバブルチャートを開発しようとしていて、それは機能していません。正しく表示されません。私は、DCバブルチャートの大部分がx軸とy軸の測定値を使用していることに気付きました。私の場合のために、私が代わりに整数または日付のテキストを使用する必要がある、などここでサンプルデータは、次のとおりです。

var data = [ 
    {Failure: "test1", topic: "a", count: "2"}, 
    {Failure: "test1", topic: "b", count: "2"}, 
    {Failure: "test1", topic: "c", count: "95"}, 
    {Failure: "test1", topic: "c", count: "2"}, 
    {Failure: "test2", topic: "a", count: "75"}, 
    {Failure: "test2", topic: "b", count: "2"}, 
    {Failure: "test2", topic: "c", count: "10"}, 
    {Failure: "test2", topic: "a", count: "2"}, 
    {Failure: "test3", topic: "a", count: "51"}, 
    {Failure: "test3", topic: "b", count: "40"}, 
    {Failure: "test3", topic: "c", count: "20"}, 
    {Failure: "test3", topic: "b", count: "15"} 
    ]; 

私はバブルチャートを作成するとき、私は「障害列が表示されますX軸なりたいですTest1、Test2、Test3 "、y軸には" a、b、c "と表示されます。カウント列はバブルのサイズになります。だから、私はテスト3とトピックCのためにどれくらいの数があるかというバブルを見ることができます。

これはdc.bubblechartで可能ですか？私が例で見るのは、x軸とy軸が数値または日付の範囲であるからです。

ここまでは、このバブルチャートを開発するための私のコードです。私ができることは最高です...

var failure= ndx.dimension(function(d) {return d.failure;}); 
var topic= ndx.dimension(function(d) {return d.topic;}); 

var bubbleChart = dc.bubbleChart("#bubble-chart"); 
//debugger; 
bubbleChart 
    .dimension(failure) 
    .group(dateGroup) 
    .x(d3.scale.ordinal().domain(failure)) 
    .y(d3.scale.ordinal().domain(topic)) 

    .width(400) 
    .height(400) 
    .yAxisPadding(50) 
    .xAxisPadding(50) 
    .xAxisLabel('X') // (optional) render an axis label below the x axis 
    .yAxisLabel('Y') // (optional) render a vertical axis lable left of the y axis 
    .renderLabel(true) 
    .title(function (p) { 

     return [ 
       "Failure: " + p.value.Failure, 
       "Topic: " + p.value.topic, 
       "count: " + p.value.count, 
       ] 
       .join("\n"); 
    }) 
    .renderTitle(true) 
    .renderHorizontalGridLines(true) // (optional) render horizontal grid lines, :default=false 
    .renderVerticalGridLines(true) 
    .maxBubbleRelativeSize(0.3) 
    .keyAccessor(function (p) { 

     return p.value.Failure; 
    }) 
    .valueAccessor(function (p) { 
     return p.value.topic; 
    }) 
    .radiusValueAccessor(function (p) { 
     return p.value.count; 
    }) 
    .elasticRadius(true) 
    .elasticY(true) 
     .elasticX(true); 

Answer 1

私はヒートマップに切り替えました。それは私が期待していたものです！クライアントはそれを好きです=）アドバイスされた@Gordonありがとう

DC.jsで提供されているヒートマップを使用しました。クロスフィルタリングは両方の方法で機能します。