编辑:明白了。您在 3 个位置遗漏了第二组变量的名称:
1.
var chart2 = d3.select(".chart")
(应该chart2
)
2.
.attr("height", barHeight * data.length);
(应该data2
)
3.
var bar2 = chart.selectAll("g")
(应该chart2
)
将留下我对下面的放置所做的事情。请注意position:absolute
on chart
使chart2
与它重叠。
您的代码有几个问题,我只是复制了有效的部分并对数据进行了更改。我将尝试找到您代码中的所有问题并编辑我的答案。
目前,这是一个可行的解决方案。我认为导致问题的原因是一些命名混乱,所以我只是覆盖两个图表的相同变量。一旦添加了 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);
http://jsfiddle.net/x8rax/6/ http://jsfiddle.net/x8rax/6/