使用 dc.jc 的气泡图中未显示气泡

Question

我正在使用 dc.js 制作气泡图，crossfilter.js 但是图表中没有显示气泡！！！！它只显示 x 轴和 y 轴，但气泡消失了。

中制作这张气泡图

这是我的代码：

var dateDim = ndx.dimension(function(d) {return d.Date;});
  var minDate = dateDim.bottom(1)[0].Date;
  var maxDate = dateDim.top(1)[0].Date;
  console.log(minDate);
  console.log(maxDate);
  //var ageDim = ndx.dimension(function(d){return +d.Age;});
  var daySum = dateDim.group().reduceSum(function(d){return 1;});


  //print_filter("ageSum");
 // var hits = dateDim.group().reduceSum(function(d) {return d.Age;});
  var brush = d3.svg.brush();



  suicideBubbleChart
    .width(990).height(200)
    .transitionDuration(1500)
    .dimension(dateDim)
    .group(daySum)
     .colors(d3.scale.category10())

.x(d3.time.scale().domain([minDate,maxDate]))
.y(d3.time.scale().domain([minDate,maxDate]))
.r(d3.scale.linear().domain([0, 4000]))
.minRadiusWithLabel(15)
.yAxisLabel("Suicides")
.elasticY(true)
                .yAxisPadding(100)
                .elasticX(true)
                .xAxisPadding(200)
                .maxBubbleRelativeSize(0.07)
                .renderHorizontalGridLines(true)
                .renderVerticalGridLines(true)
                .renderLabel(true)
                .renderTitle(true);

谢谢。

Answer 1

我已修复到足以开始在图表上显示的内容。

Date前面有个space导致那个字段名出来不对，而且日期格式不对，我加了个radiusValueAccessor。

var dateFormat = d3.time.format('%m/%d/%Y');

...

  .r(d3.scale.linear().domain([0, 10]))
  .radiusValueAccessor(function(d) {
      return d.value;
  })

http://jsfiddle.net/gordonwoodhull/wjeonreq/15/

显然它仍然不是您想要的图表，但希望现在屏幕上显示了一些内容，您可以开始调整和调试它。

特别是，您需要一个 valueAccessor 以便将气泡放置在 Y 中，以及一个 Y 刻度。

关于 dc 和 d3 的令人沮丧的事情之一是，如果某些东西不起作用，那么您只会得到一张空图表。在处理了上述出现在控制台中的错误之后，我追踪它的方式是

查看 daySum.all() 以确保数据正常（日期更正后）
在开发人员工具的“元素”选项卡中检查 svg 元素。里面的 g.chart-body 有实际内容。我看到气泡在那里，但半径为零。然后我回头看了看库存示例，看看必须缺少什么半径设置。

使用 dc.jc 的气泡图中未显示气泡

Bubbles are not showing in Bubble chart using dc.jc

bubble-chart

dc.js