22

我正在使用基于 d3 和 crossfilter的 Dimensional Charting javascript 库dc.js制作条形图。

我想要做的就是显示一个具有指定数量的 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);

直方图

这看起来不太对劲:每个酒吧都非常瘦!我想要一个看起来很正常的直方图,其中的条很粗并且几乎相互接触,每个条之间可能有几个像素的填充。知道我做错了什么吗?

4

2 回答 2

30

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

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

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

于 2013-03-03T22:25:58.217 回答
4

user2129903 给出的使用chart.xUnits()指定自定义函数的建议xUnits确实是要走的路。我想添加一个示例和一些解释,以选择该自定义函数的返回值。

医生说:

此函数应返回 x 轴上所有数据点的 Javascript 数组,或轴上的点数。

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

这是一个例子:

<!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>

请注意,在此示例中,它还可以从组对象本身检索 bin 的数量或 bin 的键值,例如,像这样

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

然而,当有空箱时,这将失败(即,产生错误的条宽)。

以供参考:

于 2016-04-27T09:31:42.127 回答