首页 文章

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

提问于
浏览
1

我很擅长这个 . 我正在尝试了解如何使用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);

1 回答

  • 0

    我切换到热图,它的功能与我预期的一样!客户喜欢它=)感谢@Gordon的建议

    我使用了DC.js中提供的热图 . 交叉滤波在两个方面都有效 .

相关问题