使用dc.js和crossfilter.js在BARCHART正确显示箱宽度(Properly di

我使用的是三维图表JavaScript库制作柱状图dc.js ，这是基于D3和crossfilter。

所有我想要做的是显示与箱指定数目的直方图，这应该使用容易barChart功能。

我有一个数组称为data包含0和90000之间的浮点值，并且我只想使用直方图以10个区间来显示的分布。

我用下面的代码产生下面的柱状图：

  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);

这并没有真正看的权利：每个酒吧真的是瘦！我想一个正常的寻找直方图，在酒吧厚，几乎相互接触，可能与一对夫妇各条之间的填充像素。任何想法，我做错了什么？

Answer 1:

在dc.js条形图使用xUnits功能自动计算基于您的x轴的范围直方图条的宽度。如果你想宽度设置为静态值，你可以使用例如自定义xUnits功能：

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

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

Answer 2:

在通过user2129903给出建议使用chart.xUnits()指定自定义xUnits功能确实要走的路。我想加入到这样的例子还有一点点的解释，选择自定义函数的返回值。

该医生说：

该函数应返回所有数据点的上x轴的Javascript数组，或在轴线上的点的数量。

也就是说，假设你想直方图，您可以直接指定窗口的数量或从您想要的窗口尺寸计算，并返回从该函数。您需要指定这个时候您的分组的数字键不连续的，等距整数。

下面是一个例子：

<!DOCTYPE html><meta charset="utf-8">
<head>
    <link rel="stylesheet" type="text/css" href="js/dc.css"/>
    <script src="js/crossfilter.js"></script>
    <script src="js/d3.js"></script>
    <script src="js/dc.js"></script>
</head>
<body>
    <div id="chart"></div>
</body>
<script>
    // generate data
    var min_value = 0, max_value = 18, value_range = max_value-min_value;
    var data = [];
    for (var i = 0; i < 1000; i++)
        data.push({x: Math.random()*value_range+min_value});
    // create crossfilter dimension for column x
    var cf = crossfilter(data),
        x = cf.dimension(function(d) {return d.x;});
    // create histogram: group values to `number_of_bins` bins
    var number_of_bins = 10,
        bin_width = value_range/number_of_bins,
        //number_of_bins = value_range/bin_width,
        x_grouped = x.group(
            function(d) {return Math.floor(d/bin_width)*bin_width;});
    // generate chart
    dc.barChart("#chart").dimension(x)
        .group(x_grouped)
        .x(d3.scale.linear().domain([min_value,max_value]))
        // let the bar widths be adjusted correctly
        .xUnits(function(){return number_of_bins;})
        .xAxis();
    dc.renderAll();
</script>

请注意，在这个例子中也可以工作，以检索箱的箱键值从组对象本身，例如：号码，或者类似这样的

// number of bins
chart.xUnits(function(){return x_grouped.all().length;});
// bins' key values
chart.xUnits(function(){return x_grouped.all().map(function(d) {return d.key;});});

然而，这将失败（即，产生错误的条宽），当有空箱。

以供参考：