dc.js 条形图不呈现

Question

我一直在尝试使用我自己的数据重新创建复杂的 reduce 示例 http://dc-js.github.io/dc.js/examples/complex-reduce.html，但无法让图表呈现。

我复制了这些函数：

 function groupArrayAdd(keyfn) {
    var bisect = d3.bisector(keyfn);
    return function(elements, item) {
      var pos = bisect.right(elements, keyfn(item));
      elements.splice(pos, 0, item);
      return elements;
    };
  }

  function groupArrayRemove(keyfn) {
    var bisect = d3.bisector(keyfn);
    return function(elements, item) {
      var pos = bisect.left(elements, keyfn(item));
      if (keyfn(elements[pos]) === keyfn(item))
        elements.splice(pos, 1);
      return elements;
    };
  }

  function groupArrayInit() {
    return [];
  };

然后设置我的维度、组和图表：

  var monthKey = function(d) {
    return d.month;
  };

  var scoreValue = function(d) {
    return d.points_per_date;
  };

  var monthDimension = ndx.dimension(monthKey);

  var monthAvgGroup = monthDimension.group().reduce(groupArrayAdd(monthKey), groupArrayRemove(monthKey), groupArrayInit);


  function sumPoints(kv) {
    return d3.sum(kv.value, scoreValue);
  };

  var accessors = {
    sum: sumPoints
  };


  monthChart
    .width(400)
    .height(300)
    .x(d3.time.scale().domain([d3.min(data, function(d) {
      return d.month
    }), d3.max(data, function(d) {
      return d.month
    })]))
    .xUnits(d3.time.months)
    .valueAccessor(sumPoints)
    .elasticY(true)
    .brushOn(true)
    .controlsUseVisibility(true)
    .dimension(monthDimension)
    .group(monthAvgGroup);

fiddle 是 https://jsfiddle.net/santoshsewlal/pa524yLc/。我想我在设置 valueAccessor 时搞砸了。
有什么建议吗？

谢谢

Answer 1

这只是一个打字错误 - 在 HTML 中，您为条形图指定了一个 ID #test-month，而它应该是 test-month。井号仅供选择器使用。

我还建议将 x 域的顶部偏移 1 个月，因为 dc.js 从字面上理解域并且不会自动允许 space 用于条形：

.x(d3.time.scale().domain([d3.min(data, function(d) {
  return d.month
}), d3.time.month.offset(d3.max(data, function(d) {
  return d.month
}),1)]))

https://jsfiddle.net/pa524yLc/6/

条形之间的比例差异确实很大 - 其中三个条形看起来好像不见了，但它们确实很小。希望logarithmic scales worked better.

dc.js 条形图不呈现

dc.js barChart does not render

crossfilter

dc.js