我正在尝试在条形图中创建一个条形图，也称为分层条形图。我的示例代码如下。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script>
var dataArray = [10, 20, 40, 60];
var canvas = d3.select("body").append("svg").attr("width", 500).attr("height", 500);
var bars = canvas.selectAll("rect").data(dataArray).enter().append("rect").attr("width", function(d){
return d * 10;
}).attr("height", 30).attr("y", function(d, i){
return i * 35;
}).attr("fill", "blue").attr("fill-width", "green");
canvas.append("text").text(function(d){
return d;
}).attr;
var dataArray1 = [5, 10, 20, 30];
var bars1 = canvas.selectAll("rect").data(dataArray1).enter().append("rect").attr("width", function(d){
return d * 7;
}).attr("height", 20).attr("y", function(d, i){
return (i*35) + 5;
}).attr("fill", "red").attr("fill-width", "black");;
</script>
</body>
</html>
这里的bars和bar1是绘制在svg容器上的条形图。我的问题是当较长的条形可见时，较小的条形不可见。但我试图在较长的条形图内放置较小的条形图，以便它看起来像下图。 
.
但是我做不到。评论较长的条形图代码显示较小的条形图。有什么帮助吗？谢谢
最佳答案
一种可能的解决方案，请参阅 example at jsbin .
问题是数组的长度没有变化，所以 enter() 没有任何可追加的内容。必须扩展第一个数组，以便创建新元素。
var dataArray1 = [5, 10, 20, 30];
var offset = dataArray1.length;
dataArray = dataArray.concat(dataArray1);
var bars1 = canvas.selectAll("rect")
// .data(dataArray1)
.data(dataArray)
.enter()
.append("rect")
.attr("width", function(d){
return d * 7;
})
.attr("height", 20)
.attr("y", function(d, i){
return ((i - offset)*35) + 5;
})
.attr("fill", "red");
//.attr("fill-width", "black");
更新:另一种更改较少的解决方案添加了 class 属性，用于区分基础栏和添加栏。参见 example at jsbin .
var bars = canvas.selectAll("rect")
.data(dataArray)
.enter()
.append("rect")
.attr('class', 'base')
...
var dataArray1 = [5, 10, 20, 30];
var bars1 = canvas.selectAll("rect.addon")
.data(dataArray1)
.enter()
.append("rect")
.attr('class', 'addon')
...
关于javascript - 使用 d3.js 的分层条形图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22804197/