Question

我很擅长这个。我正在尝试了解如何使用DC.js库开发气泡图。我使用DC.js库的原因是因为我的所有其他行图都是交叉过滤的。如果我在行图中选择任何条形图，我希望它也可以交叉过滤泡泡图表。

目前我正在尝试开发泡泡图并且它不起作用。它显示不正常。我注意到大多数直流气泡图都使用了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"}
    ];

当我创建气泡图时，我希望Failure列是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中提供的热图。交叉滤波在两个方面都有效。

DC.js气泡图 - 使用x和y轴的文本

1 个答案: