Question

我正在尝试使用crossfilter和dc.js的气泡图。但是我的问题让我的积分出现在我的图表上。我在这里构建了一个JSFiddle：

var data = [
    {date: "12/27/2012", label: "a1", x: 2, y: 190, bubble: 5},
    {date: "12/28/2012", label: "a2", x: 2, y: 10,  bubble: 5},
    {date: "12/29/2012", label: "a3", x: 95, y: 300, bubble: 10}
];
var ndx = crossfilter(data);
var parseDate = d3.time.format("%m/%d/%Y").parse;
data.forEach(function(d) {
    d.date = parseDate(d.date);
});
var dateDim = ndx.dimension(function(d) {return d.date;});
var xDim = ndx.dimension(function(d) {return d.x;});
var bubbleChart  = dc.bubbleChart("#bubble-chart"); 
bubbleChart
    .dimension(dateDim)
    .group(xDim)
    .x(d3.scale.linear().domain([0, 100]))
    .y(d3.scale.linear().domain([0, 100]))
    .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
    .label(function (p) {
        return p.label;
    })
    .renderLabel(true)
    .title(function (p) {
        return [
               "x: " + p.x,
               "y: " + p.y,
               "Bubble: " + p.bubble,
               ]
               .join("\n");
    })
    .renderTitle(true)
    .renderHorizontalGridLines(true) // (optional) render horizontal grid lines, :default=false
    .renderVerticalGridLines(true)
    .maxBubbleRelativeSize(0.3)
    .keyAccessor(function (p) {
        return p.y;
    })
    .valueAccessor(function (p) {
        return p.x;
    })
    .radiusValueAccessor(function (p) {
        return p.bubble;
    })
;

可以通过底部的数据表查看数据，因此我知道数据正在被查看。我最好的猜测是，我没有正确地实现我的团队或维度，但我似乎没有尝试为我工作。

谁能看到我在这里做错了什么？我正在寻找要显示为data.x，data.y的点，其气泡大小为data.bubble。

编辑：更新了问题以包含更多设置JS。（所有代码都在我的小提琴上）

Answer 1

我可以看到一些错误：

在气泡图中，您将维度作为组参数传递。 dc.js会期望您将先前声明的组传递给该参数。
看起来你实际上并没有使用crossfilter的好处。我们的想法是对您的数据进行分组和汇总。您的维度会为维度的每个值创建一个唯一值，这是正常的，但它忽略了crossfilter的点。
当您引用分组对象的属性时，您没有正确引用它们。当crossfilter对项目进行分组时，它会创建包含key和value属性的新对象，其中包含密钥（匹配dimension值）和值（根据{{1计算）功能）。您没有在分组对象中使用这些属性。

说了这么多，这里有reduce可以帮到你：http://jsfiddle.net/0w3xnbu0/5/

我想我已经产生了你想要的东西。

我创建的更改是：

创建了一个jsfiddle对象，用于对数据进行分组和缩小，以便dateGroup可以加载它。这可能不正确，特别是如果您的真实数据包含具有相同日期的多个记录。要使其适应其他数据集，您肯定需要更改此对象的bubbleChart部分中的函数。
```
reduce
```
创建了var dateGroup = dateDim.group().reduce( function(p, v) { ++p.count; p.label = v.label; p.bubble = v.bubble; p.x = v.x; p.y = v.y; return p; }, function(p, v) { --p.count; p.bubble = 0; p.label = ""; p.x = 0; p.y = 0; return p; }, function() { return { count: 0, x: 0, y:0, label: "" }; });和xRange对象，可正确设置yRange和min值的max和x值而不是仅仅硬编码到y。
```
[0, 100]
```

更新了bubbleChart对象，以便在bubbleChart调用中使用新的dateGroup和x和y比例，以使用上面的新范围

var xRange = [-10, d3.max(dateGroup.all(), function(d) { return d.value.x + d.value.bubble*2; }) ],
    yRange = [-10, d3.max(dateGroup.all(), function(d) { return d.value.y + d.value.bubble*2; }) ];

更改bubbleChart .dimension(dateDim) .group(dateGroup) .x(d3.scale.linear().domain(xRange)) .y(d3.scale.linear().domain(yRange))的{{1}}，title，keyAccessor和valueAccessor函数，以正确引用分组对象中的相应值。
```
radiusValueAccessor
```

dc.js气泡图无法显示点

1 个答案: