DC.js 条形图条形尺寸

Question

我有条形图运行 DC.JS 一切都呈现，但我无法在条形上获得正确的间距。标签很好，值也很好，我认为序数尺度会起作用，但似乎没有什么能缩小条形之间的差距。

http://codepen.io/MichaelArledge/pen/VeYVQr?editors=001

var dex;
var bar_chart = dc.barChart("#graph_area");
var zip_dim;
var zip_totals;

d3.json("https://data.cityofchicago.org/resource/4ijn-s7e5.json?$limit=50&$offset=0", function(data){

  dex = crossfilter(data);
  console.log(dex);
  zip_dim = dex.dimension(function(d){
    return d.zip
  });

  zip_totals = zip_dim.group();
  var all_info = zip_totals.all();
  bar_chart
    .width(500)
    .height(500)
    .x(d3.scale.ordinal().rangeRoundBands([0, 500]).domain(all_info.map(function(d){ return d.key }) ))
    .dimension(zip_dim)
    .group(zip_totals);

  bar_chart.render();
});


function print_filter(filter){
    var f=eval(filter);
    if (typeof(f.length) != "undefined") {}else{}
    if (typeof(f.top) != "undefined") {f=f.top(Infinity);}else{}
    if (typeof(f.dimension) != "undefined") {f=f.dimension(function(d) { return "";}).top(Infinity);}else{}
    console.log(filter+"("+f.length+") = "+JSON.stringify(f).replace("[","[\n\t").replace(/}\,/g,"},\n\t").replace("]","\n]"));
}

Answer 1

主要问题：

想在 .x 函数中使用序数标度。除了线性比例之外的任何东西都会导致不合理的间距并将标签视为数字。

回答： .xUnits 需要设置为 dc.units.ordinal。以下 post 对我有用。

dc.js bar chart with ordinal x axis scale doesn't render correctly

DC.js 条形图条形尺寸

DC.js Bar Chart Bar Sizing

javascript

bar-chart

d3.js

crossfilter

dc.js