d3.js中的多个条形图段

Question

我目前正在查看此条形图示例。

http://jsfiddle.net/enigmarm/3HL4a/13/

在我自己的版本中，我一直使用json数组作为数据，结构如此。

[{"irish":"154187","non_irish":"309638","area":"Connacht"},
 {"irish":"588725","non_irish":"2182932","area":"Ireland"},
 {"irish":"180755","non_irish":"1017491","area":"Leinster"},
 {"irish":"189395","non_irish":"672660","area":"Munster"},
 {"irish":"64388","non_irish":"183143","area":"Ulster"}] 

我的问题是如何将data.irish和data.non_irish同时应用于“y”属性并为两者生成条形图当前我无法确定如何应用两者，因为“y”属性只会采用一个参数。

var bar = svg.selectAll("rect")
      .data(data)
      .enter().append("g")
      .attr("class", "bar");

var bartwo =bar.append("rect")
      .attr("class", "bar")
      .style("fill", function(d,i) {
     return colours[i];
     })

      .attr("x", function(d,i) { return x(data[i].area); })
      .attr("y", function(d,i) { return y(data[i].irish); })
      .attr("width", barWidth)
      .attr("height", function(d,i) { return height - y(data[i].irish); })

真的很感激任何帮助。

Answer 1

这个双条形图可能会对您有所帮助：http://nvd3.org/examples/multiBarHorizontal.html。它强调两个维度的对比以及一维中多个群体的比较（例如，不同领域的爱尔兰语者的数量）。