DC.js Bubble-Diagramm- mit Text für x-und y-Achse

Question

Ich bin ziemlich neu in diesem. Ich versuche zu verstehen, wie man ein Blasendiagramm mithilfe der DC.js-Bibliothek entwickelt. Der Grund, warum ich die DC.js-Bibliothek verwende, weil alle anderen Zeilen-Charts crossfiltern. Wenn ich irgendwelche Balken in den Reihendiagrammen auswähle, möchte ich auch das Blasendiagramm überblenden.

Derzeit versuche ich das Blasendiagramm zu entwickeln und es funktioniert nicht. Es wird nicht richtig angezeigt. Ich habe festgestellt, dass die meisten DC-Bubble-Charts Messungen für die x- und y-Achse verwenden. Für meinen Fall, ich brauche Text anstelle von ganzen Zahlen oder Datum zu verwenden, usw. Hier ist ein Beispieldaten:

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"} 
    ]; 

Wenn ich ein Blasendiagramm erstellen, möchte ich die Failure Spalte die X-Achse sein, die zeigt " Test1, Test2, Test3 "und die y-Achse, Anzeige" a, b, c ". Die Anzahl Spalte wird die Größe der Blase sein. So kann ich eine Blase sehen, die, wie viele Zählung für Test3 und Thema C sein würde.

Ist das in dc.bubblechart möglich? weil alles, was ich in den Beispielen sehe, wenn x- und y-Achse in Zahlen oder Datum sind.

Hier ist mein Code so weit, dieses Blasendiagramm zu entwickeln. Es ist das Beste, was ich tun kann ...

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

Ich wechselte zu heatmap und es funktioniert, was ich erwartet hatte! Und der Kunde mag es =) Danke für die Beratung @ Gordon

Ich habe eine Heatmap verwendet, die in DC.js zur Verfügung gestellt wird. Das Crossfiltering funktioniert auf beide Arten.