javascript - dc.js 气泡图无法显示点

Question

我正在尝试使用 crossfilter 和 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。 (所有代码都在我的 fiddle 上)

Answer 1

我发现有一些问题:

1. 在气泡图中，您将维度作为组参数传递。 dc.js 希望您将先前声明的组传递给该参数。

2. 看起来您并没有真正利用这里的crossfilter 的优势。这个想法是对你的数据进行分组和总结。您的维度会导致为该维度的每个值创建一个唯一值，这是可以的，但它有点错过了 crossfilter 的要点。

3. 当您引用分组对象的属性时，您没有正确引用它们。当 crossfilter 对项目进行分组时，它将创建具有包含键的 key 和 value 属性的新对象(与 dimension 匹配) value)和一个值(从reduce函数计算)。您没有使用分组对象中的这些属性。

话虽如此，这里有一个 jsfiddle 可以帮助您:http://jsfiddle.net/0w3xnbu0/5/

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

我所做的更改是:

1. 创建了一个 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: "" };
       });
   

2. 创建了一个 xRange 和 yRange 对象，用于正确设置您的 min 和 max 值x 和 y 值，而不仅仅是硬编码为 [0, 100]。

   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; }) ];
   

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

   bubbleChart
       .dimension(dateDim)
       .group(dateGroup)
       .x(d3.scale.linear().domain(xRange))
       .y(d3.scale.linear().domain(yRange))
   

4. 更改了 bubbleChart 的 title、keyAccessor、valueAccessor 和 radiusValueAccessor 函数 以正确引用分组对象中的适当值。

       .title(function (p) {
           return [
              "x: " + p.value.x,
              "y: " + p.value.y,
              "Bubble: " + p.value.bubble,
              ]
              .join("\n");
       })
   ...
       .keyAccessor(function (p) {
           return p.value.x;
       })
       .valueAccessor(function (p) {
           return p.value.y;
       })
       .radiusValueAccessor(function (p) {
           return p.value.bubble;
       })