javascript - DC 条形图中的条形重叠

标签 javascript d3.js dc.js

我有一个条形图,但每一列都重叠,如下图所示: Overlap chart

但是当我在 jsfiddle 中创建 fiddle 时使用复制和粘贴代码,图表不会重叠。在我的原始页面中,我只有来自 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();

最佳答案

您引用的 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 使用最新的,所以它显示了修复。干得好戈登

关于javascript - DC 条形图中的条形重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24848550/

相关文章:

javascript - 如何添加带有图像的选项以在页面加载期间进行选择?

javascript - 如何将 UIWebView javascript 异常的 sourceId 与源文件相关联?

javascript - 如何在 D3.js 中更改径向树的根

javascript - D3.js 过渡多个弧路径

javascript - DC.js compositeChart 与两个 lineChart 都代表日期的平均值

javascript - ES6类中类/模块类

javascript - AJAX请求导致 'undefined is not an object'错误

javascript - d3.js v4 - 嵌套选择

d3.js - 使用不同颜色的 dc.js 显示原始(有条件)拉丝未拉丝交叉过滤器条

javascript - 隐藏 dc.js 行图中的指定行