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

当我创建一个气泡图时，我希望失败列是显示"Test1，Test2，Test3“的X轴和显示"a，b，c”的y轴。count列将是气泡的大小。所以我可以看到一个气泡，这是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

我切换到了heatmap，它的工作方式和我预期的一样！客户喜欢它=)谢谢你的建议@戈登

我使用了DC.js中提供的热图。交叉过滤在两种方式下都有效。