使用dc.js和crossfilter.js在barChart中正确显示bin宽度 [英] Properly display bin width in barChart using dc.js and crossfilter.js

问题描述

我使用Dimensional Charting javascript库自动计算基于直方图的条形的宽度在x轴的范围。如果要将宽度设置为静态值，可以使用自定义xUnits函数，例如：

  chart.xUnits （）{return 10;}）; 
  

这将给你一个更合适的宽度。

I'm making a bar chart using the Dimensional Charting javascript library dc.js, which is based on d3 and crossfilter.

All I want to do is display a histogram with a specified number of bins---this should be easy using the barChart function. I have an array called data which contains floating-point values between 0 and 90000, and I just want to display the distribution using a histogram with 10 bins. I use the following code to produce the histogram below:

  var cf = crossfilter(data);
  var dim = cf.dimension(function(d){ return d[attribute.name]; });

  var n_bins = 10;
  var xExtent = d3.extent(data, function(d) { return d[attribute.name]; });
  var binWidth = (xExtent[1] - xExtent[0]) / n_bins;
  grp = dim.group(function(d){return Math.floor(d / binWidth) * binWidth;});
  chart = dc.barChart("#" + id_name);
  chart.width(200)
    .height(180)
    .margins({top: 15, right: 10, bottom: 20, left: 40})
    .dimension(dim)
    .group(grp)
    .round(Math.floor)
    .centerBar(false)
    .x(d3.scale.linear().domain(xExtent).range([0,n_bins]))
    .elasticY(true)
    .xAxis()
    .ticks(4);

That doesn't really look right: each bar is really skinny! I want a normal looking histogram, where the bars are thick and nearly touch each other, with maybe a couple of pixels of padding between each bar. Any idea what I'm doing wrong?

解决方案

Bar charts in dc.js use the xUnits function to automatically calculate the width of the bars in a histogram based on the range of your x-axis. If you want to set the width to a static value you can use a custom xUnits function for example:

chart.xUnits(function(){return 10;});

This should give you a more fitting width.

这篇关于使用dc.js和crossfilter.js在barChart中正确显示bin宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！