条形图在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版本。

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

   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代码，这显然是错误的。

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