【问题标题】:Calculating the number of bars in a bar chart in dc.js在 dc.js 中计算条形图中的条数
【发布时间】:2016-12-14 13:22:13
【问题描述】:

我想根据条形图上出现的条形数量调整条形图的宽度。这是我的图表,它显示了足够的记录,这些记录适合宽度并且显示得很好。

这是另一种情况,其中只有两个条以相同的宽度显示,这看起来很奇怪。

对于这种情况,我需要根据柱的数量来调整图表的宽度,这样我的图表就会看起来很漂亮。

这是我的脚本的一部分

var width = ??;   // Here how should I calculate width based on the number of bars? 
redrawCustomerCodeBarChart
        .width(width)
        .height(400)
        .margins({top: 10, right: 10, bottom: 70, left: 30})
        .dimension(customerNamer)
        .group(customerNameGroupr)
        .x(d3.scale.ordinal().domain(newCoh.map(function (d) {return d.customerName; })))
        .xUnits(dc.units.ordinal)
        .elasticY(true)
        .renderHorizontalGridLines(true)
        .on('renderlet',function(chart){
              chart.selectAll("g.x text")
                .attr('dx', '-15')
                .attr('transform', "rotate(-55)");
            })
         .on('filtered.monitor', function(d) {
               // return d.key + ' (' + d.value + ')';
               if(d.value !== undefined)
                size= d.value;
            })
        .controlsUseVisibility(true);

【问题讨论】:

  • 在这种情况下我们可以使用.valueAccessor.keyAccessor 来返回键值对
  • 感谢您的想法

标签: d3.js dc.js


【解决方案1】:

在大多数 dc.js 图表中,数据是从 group.all() 读取的。所以酒吧的数量很简单

customerNameGroupr.all().length

然后适当地相乘。

如果在过滤内容时条数可能会发生变化(例如使用remove_empty_bins),那么您需要在每次重绘之前设置宽度:

chart.on('preRedraw', function(chart) {
    chart.width(chart.group().all().length * BAR_WIDTH);
});

这可能有点乱。

【讨论】:

  • 你能说一下哪个属性将用于设置或修复条的宽度。
  • 或者我们不能将条形图的宽度设置为自动。谢谢戈登:)
  • 有意思,好像条形宽度总是计算出来的,没办法直接设置。所以我认为你设置图表宽度的技术是你能做的最好的。
  • 显然最简单的方法是使用counter = crossfilter.groupAll() 创建一个减少所有过滤行的对象。默认减少计数行。然后在需要记录数量的任何地方致电counter.value()
猜你喜欢
  • 2015-05-21
  • 1970-01-01
  • 1970-01-01
  • 2014-02-22
  • 1970-01-01
  • 2015-09-09
  • 2013-10-14
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多