Question

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

<!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容器上绘制的条形图。我的问题是当较长的条可见时，较小的条不可撕。但我试图在较长的条形图中放置较小的条形图，使其看起来像下面的图像。 enter image description here 。

但我无法这样做。评论较长的条形图代码显示了较小的条形图。对此有何帮助？感谢

Answer 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')
        ...

带有d3.js的分层条形图

1 个答案: