Question

我正在尝试使用DC.js创建气泡图

我的样本数据是：

State_Name  Area    Cities    Villages   Population
A           200      60          1050      10000
B           300      80          1100      15678
C           500      20          2220      97767
D           600      90          3400      50000

所以，我想在bubbleChart上显示总共三个气泡。第一个泡沫应代表总面积，其余两个应分别代表总城市和总村庄。我为barChart vs States_Names制作了Population，其中xAxis代表States_name而yAxis代表Population。现在我希望每当我点击一个或多个酒吧或你可以说States_name我应该为所有选定的States_name得到面积，城市和村庄的总和。 Area，Cities和Villages的这些总和值将分别代表bubbleChart上的三个气泡。

例如：如果我点击barChart分别代表State_Name = A和B的两个小节，我   应该在bubbleChart上获得三个气泡。在徘徊这三个   泡泡我应该得到总值Area = 200 + 300 = 500，总计   Cities = 60 + 80 = 140，总Villages = 1050 + 1100 = 2150。

用于定位气泡：   我可以修复他们的yAxis职位。而且，他们的xAxis职位和radius应该取决于泡沫的价值。对于上面的例子，代表总Villages的气泡半径应该大于其他两个气泡的半径。同样，对于xAxis位置，代表总Cities的气泡将位于其他两个气泡的左侧。

我从这里尝试了代码：http://jsfiddle.net/gordonwoodhull/37uET/6/   但得到错误：“group.top不是函数”。它似乎   该代码仅适用于rowChart。

var data = [
        {type: 'foo', a: 10, b: 9, c: 11, d: 2},
        {type: 'bar', a: 1, b: 4, c: 2, d: 3},
        {type: 'foo', a: 0, b: 2, c: 1, d: 22},
        {type: 'bar', a: 11, b: 5, c: 6, d: 5}];
    var ndx1 = crossfilter(data);

    function regroup(dim, cols) {
        var _groupAll = dim.groupAll().reduce(
            function(p, v) { // add
                cols.forEach(function(c) {
                    p[c] += v[c];
                });
                return p;
            },
            function(p, v) { // remove
                cols.forEach(function(c) {
                    p[c] -= v[c];
                });
                return p;
            },
            function() { // init
                var p = {};
                cols.forEach(function(c) {
                    p[c] = 0;
                });
                return p;
            });
        return {
            all: function() {
                // or _.pairs, anything to turn the object into an array
                return d3.map(_groupAll.value()).entries();
            }
        };
    }

    var dim = ndx1.dimension(function(r) { return r.a; });
    var sidewaysGroup = regroup(dim, ['a', 'b', 'c', 'd']);

    var typeDim = ndx.dimension(function(r) { return r.type; });

    var sidewaysRow = dc.bubbleChart('#state-donations')
            .width(350).height(300)
            .dimension(dim)
            .group(sidewaysGroup)
            .elasticX(true)
            .maxBubbleRelativeSize(0.3)
                        .x(d3.scale.linear().domain([0, 10]))
                        .y(d3.scale.linear().domain([0, 10]))
                        .r(d3.scale.linear().domain([0, 400]))
                        .elasticY(true)
                        .yAxisPadding(100)
                        .elasticX(true)
                        .xAxisPadding(500);

请帮忙！

使用DC.js的多维气泡图

0 个答案: