Javascript D3.js分组条形图

我正在使用D3.js制作一个条形图，如下所示
（来源：）

但它应该是垂直的。因此，我可以通过两组数据进行比较。 为了进行比较，我构建了两个类“chart”和“chart1”，并分别为它们提供数据，但它只显示了第一个svg图表。有什么问题？ 这是密码

.chart rect{
填充：rgb（203、232、118）；
}
.chart2 rect{
填充：rgb（50,50,50）；
}
.图表文本{
填充物：白色；
字体：10px无衬线；
文本锚定：结束；
}
var数据=[4,8,15,16,23,42]；
var宽度=420，
杆高=80；
var x=d3.scale.linear（）
.domain（[0，d3.max（数据）]）
.范围（[0，宽度]）；
var图表=d3。选择（“图表”）
.attr（“宽度”，宽度）
.attr（“高度”，条形高度*数据长度）；
变量条=图表。选择全部（“g”）
.数据（数据）
.enter（）.append（“g”）
.attr（“transform”，函数（d，i）{return“translate（0，+i*barHeight+”）；}）；
附加条（“rect”）
.attr（“宽度”，x）
.attr（“高度”，酒吧高度-60）；
附加条（“文本”）
.attr（“x”，函数（d）{返回x（d）-3；}）
.attr（“y”，酒吧高度/2）
.attr（“dy”，“.35em”）
.text（函数（d）{return d；}）；
//这里的数据并不那么有趣。
VarData2=[10,10,10,10,10,10]；
var宽度=420，
杆高=80；
var x2=d3.刻度.线性（）
.domain（[0，d3.max（数据2）]）
.范围（[0，宽度]）；
var chart2=d3。选择（“图表”）
.attr（“宽度”，宽度）
.attr（“高度”，条形高度*数据长度）；
var bar2=图表。选择全部（“g”）
.数据（数据2）
.enter（）.append（“g”）
.attr（“transform”，函数（d，i）{return“translate（0，+i*barHeight+”）；}）；
bar2.追加（“rect”）
.attr（“宽度”，x2）
.attr（“高度”，酒吧高度-60）；

编辑：明白了。第二组变量的名称遗漏在3个地方：

一,

var chart2=d3。选择（“.chart”）

（应该是

chart2

）

二,

.attr（“高度”，barHeight*data.length）（应为
data2
）

三,

var bar2=图表。选择全部（“g”）
（应为
chart2
）

将留下我对下面的放置所做的。注意
图表
上的
位置：绝对
，使
图表2
与其重叠

您的代码有几个问题，我只是复制了工作的部分并对数据进行了更改。我将尝试查找代码中的所有问题并编辑我的答案

现在，这里有一个有效的解决方案。我认为造成问题的原因是命名混乱，所以我只是覆盖了两个图表的相同变量。一旦添加了svg元素，就不需要保留变量了

var data = [4, 8, 15, 16, 23, 42];


var width = 420,
    barHeight = 80;

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, width]);


var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", barHeight * data.length);


var bar = chart.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight +")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 60);

var data = [10, 10, 10, 10, 10, 10];


var width = 420,
    barHeight = 80;

var chart = d3.select(".chart2")
    .attr("width", width)
    .attr("height", barHeight * data.length);


var bar = chart.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + (i * barHeight + barHeight - 60 )  +")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 60);

你能解决这个问题吗@Mosho:
var data = [4, 8, 15, 16, 23, 42];


var width = 420,
    barHeight = 80;

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, width]);


var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", barHeight * data.length);


var bar = chart.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight +")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 60);

var data = [10, 10, 10, 10, 10, 10];


var width = 420,
    barHeight = 80;

var chart = d3.select(".chart2")
    .attr("width", width)
    .attr("height", barHeight * data.length);


var bar = chart.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + (i * barHeight + barHeight - 60 )  +")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 60);