使用DC.js创建柱形图

Question

我想创建一个包含DC.js的柱形图，如下图所示：

我的数据是这样的：

var data =[
  {name:'Venezuela',sale:300},
  {name:'Saudi',sale:253},
  {name:'Canada',sale:150},
  {name:'Iran',sale:125},
  {name:'Russia',sale:110},
  {name:'UAE',sale:90},
  {name:'US',sale:40},
  {name'China',sale:37}
]

我尝试创作，但我不确切知道发生了什么。我不知道如何绘制x轴或y轴Axi.i搜索并找到一些例子，但在那些例子中所有的x轴是时间唯一它使用.x(d3.time.scale()，但我的x轴不是时间，我不知道如何控制它。

更新

为图表添加颜色

 var colorScale = d3.scale.ordinal().range(['#DB0A5B','#F62459','#F1A9A0','#2C3E50','#26A65B','#E87E04','#D35400']);
 chart.colors(d3.scale.ordinal().range(colorScale);

Answer 1

以下是一个简单的示例，可帮助您入门：http://jsfiddle.net/djmartin_umich/s9c84/

chart
.height(300)
.width(800)
.dimension(countryDimension)
.group(countryGroup)

正如戈登所说，你需要设定一个序数尺度：

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

以下是管理轴标签的方法：

.xAxisLabel("MMbbl = one million barrels")
.yAxisLabel("Reserves (MMbbl)")
.elasticY(true)
.xAxis().ticks(3);

这将使您获得如下图表：

就像戈登提到的那样，你需要使用一个渐变来控制颜色。使用以下代码更新示例小提琴：

 chart
    .renderlet(function(chart){
        debugger;
    var colors = d3.scale.ordinal().domain(countries)
        .range(["steelblue", "brown", "red", "green", "yellow", "grey", "blue", "black"]);
    chart.selectAll('rect.bar').each(function(d){
         d3.select(this).attr("style", "fill: " + colors(d.data.key));
});