Question

我在D3中有一个水平条形图，但我想要一个垂直条形图而不是水平条形图。这就是现在的样子。我尝试摆弄X轴和Y轴并且似乎无法正确使用它。任何帮助将不胜感激。

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Layered Bar Chart</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('class', 'base')
        .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.addon")
    .data(dataArray1)
    .enter()
    .append("rect")
        .attr('class', 'addon')
        .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>

＆＃13;

Answer 1

对于这种类型的转换，您需要更改多于x和y。

使用示例代码，图表的形状将由每个矩形的四个属性决定：x，y，width和height 。毕竟，（通常）垂直条形图的每个条形高度不同，而水平条形图的高度不同。

其次，大多数垂直条形图的底部都固定在底部，而大多数水平条形图的固定在左侧。在svg坐标空间中，svg的顶部是y = 0，而svg的左边是x = 0.因此，只需交换x和y，width和{{1在您的示例中，将生成一个条形图，条形图从图表顶部向下延伸。

要解决此问题，您需要修改每个矩形的height属性。由于y属性设置矩形的顶部，您需要找出每个矩形的顶部。对于您的代码：

此行是新的，因为您没有在原始代码中设置x属性，而是使用默认的零。这不会在垂直图中做，因为矩形的顶部不能在y = 0（在大多数情况下）。

当然，使用刻度会使标记轴或多系列条形图等变得复杂。我已经使用了您提供的代码。我已将您的示例剥离到一个图表而不是两个图表，以显示这些更改可能应用于无标度图表的最小示例。

＆＃13;

.attr("y", function(d,i) { return heightOfSVG - heightOfRectangle; }) // bottom of rectangle - rectangle height = rectangle top

＆＃13;

var canvas = d3.select("body")
    .append("svg")
    .attr("width", 500).attr("height", 500);

var bars = canvas.selectAll("rect")
    .data([10, 20, 40, 60])
    .enter()
    .append("rect")
        .attr("height", function(d){  
            return d * 10;
        })
        .attr("width", 30)
        .attr("x", function(d, i){
            return i * 35;
        })
        .attr("y", function(d,i) { return 500 - d * 10; })
        .attr("fill", "blue");

＆＃13;

如何在D3 v4中将水平条形图更改为垂直条形图

1 个答案: