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

我正在使用基于d3和交叉过滤器的Dimensional Charting JavaScript库dc.js制作条形图。使用dc.js和crossfilter.js在barChart中正确显示容器宽度

我想要做的就是显示一个带有指定数量箱的直方图---使用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);

histogram

并没有真正看的权利：每个酒吧真的是瘦！我想要一个正常的直方图，其中条块很厚并且几乎相互接触，每个条块之间可能会有几个像素填充。任何想法我做错了什么？

来源

2013-03-03 conradlee

dc.js中的条形图使用xUnits function根据x轴的范围自动计算柱状图中条的宽度。如果你想宽度设置为静态值，你可以使用自定义功能xUnits例如：

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

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

来源

2013-03-03 22:25:58 user2129903

suggestion given by 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;});});

但是，如果有空箱，这将会失败（即产生错误的横条宽度）。

参考：

来源

2016-04-27 09:31:42 moooeeeep

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

回答

相关问题