使用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中正確顯示容器寬度

回答

相關問題