DC.js 버블 차트 - x 축과 y 축의 텍스트 사용

Question

나는 이것에 대해 아주 새롭다. DC.js 라이브러리를 사용하여 버블 차트를 작성하는 방법을 이해하려고합니다. 내 모든 다른 행 차트 crossfiltering 때문에 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 "로 표시합니다. 개수 열은 거품의 크기가됩니다. 그래서 나는 test3과 주제 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에서 제공되는 히트 맵을 사용했습니다. 교차 필터링은 두 가지 방식으로 모두 작동합니다.