javascript - 使用 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 轴。我搜索并找到一些示例，但在该示例中所有 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)

正如 Gordon 所说，您需要设置一个序数标度:

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

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

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

这会让你得到这样的图表:

就像 Gordon 提到的，您将需要使用 renderlet 来控制那里的颜色。使用以下代码更新示例 fiddle :

 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));
});