Question

我正在使用Dimensional Charting javascript库dc.js创建一个条形图，它基于d3和crossfilter。

我想要做的就是显示具有指定数量的bin的直方图，使用barChart函数应该很容易。

我有一个名为data的数组，其中包含0到90000之间的浮点值，我只想使用带有10个bin的直方图显示分布。

我使用以下代码生成下面的直方图：

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

histogram

这看起来并不合适：每个酒吧都很瘦！我想要一个看起来很正常的直方图，其中条很粗，几乎相互接触，每个条之间可能有几个像素的填充。知道我做错了吗？

Answer 1

dc.js中的条形图使用xUnits function根据x轴的范围自动计算直方图中条形的宽度。如果要将宽度设置为静态值，可以使用自定义xUnits函数，例如：

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

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

Answer 2

使用chart.xUnits()指定自定义xUnits功能的suggestion given by user2129903确实是可行的方法。我想添加一个示例和一些解释来选择该自定义函数的返回值。

医生说：

这个函数应该返回一个Javascript数组 x轴上的数据点，或轴上的点数。

也就是说，假设您想要制作直方图，您可以直接指定容器数量，也可以根据所需的容器大小计算容器数量，然后从该函数返回。当分组的数字键不是连续的等距整数时，你需要指定它。

以下是一个例子：

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

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

供参考：

使用dc.js和crossfilter.js在barChart中正确显示bin宽度

2 个答案: