带有 d3.js 的分层条形图答案

【问题标题】：Layered Bar chart with d3.js带有 d3.js 的分层条形图
【发布时间】：2014-04-02 07:20:30
【问题描述】：

我正在尝试在条形图中创建一个条形图，也称为分层条形图。我的示例代码如下。

<!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>

这里的 bar 和 bar1 是在 svg 容器上绘制的条形图。我的问题是当较长的条可见时，较小的条不可见。但我试图将较小的条放在较长的条内，使其看起来像下图。。

但我不能这样做。评论较长的条形图代码会显示较小的条形。对此有什么帮助吗？谢谢

【问题讨论】：

标签： javascript css svg d3.js

【解决方案1】：

一种可能的解决方案，请参阅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')
        ...

【讨论】：

注意：我不知道fill-width是什么意思，所以我把它注释掉了。
只是一个小细节：两个图表的宽度乘数（值的实际表示）应该相同，以保持值的可比性。