带序数轴的 dc.js 条形图答案

【问题标题】：dc.js bar chart with ordinal axes带序数轴的 dc.js 条形图
【发布时间】：2016-02-12 08:51:47
【问题描述】：

我正在制作一个简单的条形图，以获得一年中的总收入。下面是使用dc.js构建条形图的sn-p

//INITIALIZE CROSSFILTER AND RELATED DIMENSIONS/AGGREGATES
var data = crossfilter([
    {revenue: 1487946,year: 2016}, 
    {revenue: 2612,year: 2016},
    {revenue: 2908,year: 2015},
    {revenue: 1648171,year: 2015 }]);

var dimension = data.dimension(function(d) {return d.year;});
var group = dimension.group().reduceSum(function(d) {return d.revenue;});

// MAKE A DC BAR CHART
dc.barChart("#bar-chart")
  .dimension(dimension)
  .group(group)
  .x(d3.scale.ordinal().domain(dimension)) // Need the empty val to offset the first value
  .xUnits(dc.units.ordinal) // Tell Dc.js that we're using an ordinal x axis
  .brushOn(false)
  .centerBar(false)
  .gap(70);

console.log(dc.version);
dc.renderAll();

必须注意，为简单起见，年份被呈现为序数。

使用 dc.js 版本 - 1.7.5，输出不清楚：

使用 dc.js 版本 - 2.x(beta) 输出要好得多：

由于其他冲突，目前无法使用 dc.js 2.x。关于使用 dc.js 1.7.5 使条形图更好的想法？

这里是JS Fiddle 玩！提前致谢。

【问题讨论】：

标签： javascript d3.js dc.js

【解决方案1】：

在下面的脚本中添加了 cmets：

dc.barChart("#bar-chart")
  .width(300) //give it a width
  .margins({top: 10, right: 10, bottom: 20, left: 100})//give it margin left of 100 so that the y axis ticks dont cut off
  .dimension(dimension)
  .group(group)
  .x(d3.scale.ordinal().domain(dimension)) // Need the empty val to offset the first value
  .xUnits(dc.units.ordinal) // Tell Dc.js that we're using an ordinal x axis
  .brushOn(false)
  .centerBar(false)
  .gap(7);//give it a gap of 7 instead of 70

工作代码here

【讨论】：

谢谢！我也明白了.. 但是 X 轴不会在这方面有一点偏移吗？无论如何我们可以解决它吗？
我认为这是xUnits(dc.units.ordinal)的基本行为
但是我们不是在这里看到了故障吗？它不应该抵消。当我尝试使用 dc.js 2.x 时，它并没有抵消。你也可以试试！这就是为什么，我希望有一些解决方法。

【解决方案2】：

临时答案：避免使用序数轴

使用 dc.js 1.7.5 可能会出现故障。就目前而言，我能够通过将年份视为线性刻度并适当地处理刻度来呈现图表。

让我们打开这个问题，以防有人找到更好的答案！

【讨论】：