显示[国家/地区:客户]数组的DC.JS barChar

Question

我完全无法理解如何在DC的barChart中显示非常简单的数据。

X轴应显示国家/地区，Y轴应显示相应国家/地区的相应用户数量。

JSON数据如下所示：

[
    {"country":"Russia","users":3736},
    {"country":"USA","users":747},
    {"country":"Ukraine","users":164}
]

请看一下javascript代码：

$(document).ready(function(){
  var _w = $('#ubc-graph').innerWidth();
  var _h = $('#ubc-graph').innerHeight();
  var userByCountryDistroChart = dc.barChart("#ubc-graph");
  d3.json('user-by-country-distribution.json',function(error,data){
    var ndx = crossfilter(data);
    var countryDimension = ndx.dimension(function (d) {
      return d.country;
    });
    var max_usr_num = countryDimension.top(1)[0].country;
    var min_usr_num = countryDimension.bottom(1)[0].country;
    var totalByCountrySum = countryDimensionGroup.reduceSum(function(d){
      return d.users;
    });
    userByCountryDistroChart
      .xAxisLabel("countries")
      .yAxisLabel("number of users")
      .width(_w)
      .height(_h)
      .transitionDuration(1000)
      .dimension(countryDimensionGroup)
      .group(totalByCountrySum, "users by country")
      .mouseZoomable(true)
      .y(d3.scale.linear().domain([min_usr_num,max_usr_num]))
      .x(d3.scale.linear().domain([0,5000]))
      .elasticX(true)
      .elasticY(true)
      .renderHorizontalGridLines(true)
      .renderVerticalGridLines(true)
      .legend(dc.legend().x(800).y(10).itemHeight(13).gap(5))
      .brushOn(false)
      .render();
  });
});

Answer 1

您可能想要一个有序的x轴。你可以这样设置域和xUnits：

chart
    .x(d3.scale.ordinal().domain(countries))
    .xUnits(dc.units.ordinal)

下面是一个jsFiddle，它应该可以帮助您入门：http://jsfiddle.net/djmartin_umich/LDN72/