DC.js 条形图条形大小答案

【问题标题】：DC.js Bar Chart Bar SizingDC.js 条形图条形大小
【发布时间】：2015-12-08 22:57:02
【问题描述】：

我有运行 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]"));
}

【问题讨论】：

标签： javascript d3.js bar-chart dc.js crossfilter

【解决方案1】：

主要问题：

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

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

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

【讨论】：