DC.js条形图条形尺寸

时间:2015-12-08 22:57:03

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

我的条形图正在运行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]"));
} 

1 个答案:

答案 0 :(得分:1)

主要问题:

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

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

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