dc.js气泡图无法显示点

Question

我正在尝试让一个气泡图与交叉过滤器和dc.js一起工作。但我很难让我的分数出现在我的图表上。我在这里建了一个JSFiddle：

http://jsfiddle.net/4asmb7h1/

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

我看到了一些错误的地方：

1. 在气泡图中，您以组参数的形式传递维度。dc.js希望您将先前声明的组传递给该参数。
2. 在这里，您似乎并没有实际使用crossfilter的好处。这样做的目的是对你的数据进行分组和汇总。维度的结果是为维度的每个值创建一个唯一的值，这是可以的，但它忽略了crossfilter的要点。
3. 当引用分组对象的属性时，没有正确地引用它们。当crossfilter对项进行分组时，它将创建具有key和value属性的新对象，这些属性包含键(匹配dimension值)和值(根据reduce函数计算)。您不能使用分组对象中的这些属性。

话虽如此，以下是一个可能对您有所帮助的jsfiddle：http://jsfiddle.net/0w3xnbu0/5/

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

我所做的更改是：

1. 创建一个dateGroup对象，该对象对数据进行分组和减少，这样bubbleChart就可以加载它。这可能是不正确的，特别是如果您的实际数据包含多个具有相同日期的记录。要使其适应其他数据集，您肯定需要更改该对象的reduce部分中的函数。 变量dateGroup = dateDim.group().reduce(函数(p，v) { ++p.count；p.label = v.label；p.bubble = v.bubble；p.x = v.x；p.y = v.y；} )，函数(p，v) {-p计数；p.bubble = 0；p.label =“；p.x = 0；p.y = 0；返回p；}，函数(){返回{ count: 0，x: 0，y:0，label：“}；})；
2. 创建了一个xRange和yRange对象，它正确地设置了x和y值的min和max值，而不仅仅是硬编码给[0, 100]。 变量xRange = -10，d3.max(dateGroup.all()，函数(D){返回d.value e.x+ d.value.bubble*2；})，yRange = -10，d3.max(dateGroup.all()，函数(D){reverd.value e.y+ d.value.bubble*2；})；
3. 更新bubbleChart对象以在bubbleChart调用中使用新的dateGroup、x和y尺度，以使用上面的新范围 bubbleChart .dimension(dateDim) .group(dateGroup) .x(d3.scale.linear().domain(xRange)) .y(d3.scale.linear().domain(yRange))
4. 更改title、keyAccessor、valueAccessor和radiusValueAccessor函数，以正确引用分组对象中的适当值。 .title(函数(p) {返回"x：“+p.value e.x，"y：”+p.value e.y，"Bubble：“+ p.value.bubble，.join(”n“)；}) .keyAccessor(函数(p) {返回p.value e.x；).valueAccessor(函数(p) {返回p.value e.y；}) .radiusValueAccessor(函数(p) {返回p.value.bubble；})