DC 条形图中的条形重叠

Question

我有一个条形图，但每一列都是重叠的，如下图所示：

但是当我使用复制和粘贴代码在jsfiddle 中创建小提琴时，图表不重叠。在我的原始页面中，我只有来自 twitter bootstrap 的样式。即使我删除了页面中的任何样式，我在条形图中也有重叠列。 这是我的代码：

 var parseDate = d3.time.format("%Y/%m/%d").parse;
 var myData = [{
 seller: 'Ehtemam',
 sdate: '2014/10/09',
 unitprice: 10,
 quantity: 100
 }, {
 seller: 'Jafari',
 sdate: '2014/10/09',
 unitprice: 100,
 quantity: 106
 }, {
 seller: 'Jamali',
 sdate: '2014/09/09',
 unitprice: 105,
 quantity: 109
 }, {
 seller: 'Asghari',
 sdate: '2014/08/09',
 unitprice: 110,
 quantity: 106
 }, {
 seller: 'Rezaee',
 sdate: '2014/10/09',
 unitprice: 150,
 quantity: 107
 }, {
 seller: 'Akrami',
 sdate: '2014/08/09',
 unitprice: 1,
 quantity: 190
 }, {
 seller: 'Ehtemam',
 sdate: '2013/07/09',
 unitprice: 1,
 quantity: 180
 }, {
 seller: 'Ehtemam',
 sdate: '2014/06/09',
 unitprice: 12,
 quantity: 190
 }, {
 seller: 'Akrami',
 sdate: '2014/11/09',
 unitprice: 12,
 quantity: 150
 }, {
 seller: 'Ehtemam',
 sdate: '2014/12/09',
 unitprice: 14,
 quantity: 140
 }, {
 seller: 'Jafari',
 sdate: '2013/12/09',
 unitprice: 56,
 quantity: 130
 }, {
 seller: 'Asghari',
 sdate: '2014/12/09',
 unitprice: 33,
 quantity: 120
 }, {
 seller: 'Ehtemam',
 sdate: '2012/11/09',
 unitprice: 188,
 quantity: 10
 }, {
 seller: 'Rezaee',
 sdate: '2014/10/09',
 unitprice: 100,
 quantity: 10
 }, ];
 myData.forEach(function (d) {
 d.sdate = parseDate(d.sdate);
 d.year = d.sdate.getFullYear();
 });
 var data = crossfilter(myData);

 var sellers = [];
  for (var d in myData) {
 if (sellers.indexOf(myData[d].seller) == -1) {
     sellers.push(myData[d].seller);
 }
 }
  var colorScale = d3.scale.ordinal().range(['#DB0A5B', '#F62459', '#F1A9A0', '#2C3E50', '#26A65B', '#E87E04', '#D35400']);
  var sellerDimension = data.dimension(function (d) {
 return d.seller;
 });
 var sellerGroup = sellerDimension.group().reduceSum(function (d) {
 return d.quantity;
 });
 var sellerChart = dc.barChart('#chart');
  sellerChart.height(300)
 .width(600)
 .dimension(sellerDimension)
 .group(sellerGroup)
 .x(d3.scale.ordinal().domain(sellers))
 .xUnits(dc.units.ordinal)
 .xAxisLabel('Sellers')
 .yAxisLabel('Quantity')
 .xAxis().ticks(3);
  sellerChart.title(function (d) {
 return d.key + ' : ' + d.value;
 });

 dc.renderAll();

Answer 1

您引用的 jsfiddle 使用的是 1.71 版。我敢打赌你的真实代码使用的是 2.x 版本。

我在http://jsfiddle.net/djmartin_umich/6zrMc/ 确认 v2.x 存在此问题。

   chart.height(300)
        .width(800)
        .dimension(countryDimension)
        .group(countryGroup)
        .x(d3.scale.ordinal().domain(countries))
        .xUnits(dc.units.ordinal)
        .xAxisLabel("MMbbl = one million barrels")
        .yAxisLabel("Reserves (MMbbl)")
        .elasticY(true)
        .xAxis().ticks(0);

https://github.com/dc-js/dc.js/issues/533 详细讨论了此问题，但该问题尚未解决。我已将此 stackoverflow 讨论引用为问题评论。

更新：此问题现已在最新的 DC.js 版本中得到修复。上面的 JSfiddle 使用最新的，所以它显示了修复。干得好，戈登

Answer 2

使用.barPadding。它需要一个介于 0 和 1 之间的数字，并应用 d3 的条形宽度分配而不是 dc.js 代码，这显然是错误的。

现在我们只需要弄清楚如何弃用默认为 2 的 .gap。