Question

我正在使用d3.js来使用图表。我的数据图表垂直显示我不知道如何更改图表的位置任何人都可以告诉我。

这里我附上了我的代码。

<!DOCTYPE html>
<html>
<head>
<title>D3</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>

<script>
d3.json("mydata.json",function(data){


var canvas=d3.select("body").append("svg")
        .attr("width",500)
        .attr("height",500)
        .append("g")
        .attr("transform","translate(50,50)")

canvas.selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("width",function(d){ return d.age*10})
        .attr("height",48)
        .attr("y",function(d,i){return i*50;})
        .attr("fill","red");

canvas.selectAll("text")
.data(data)
.enter()
    .append("text")
    .attr("fill","white")
    .attr("y",function(d,i){return i*50+27;})
    .text(function(d){return d.name})

    })
</script>

</body>
</html>

这里我附加了输出图像。我想将位置垂直改变为水平。

click here to see the image

Answer 1

您需要做的是更改附加到svg的rect元素的宽度和高度。它们还需要水平平移而不是垂直平移。类似的东西：

    .attr("width",48)
    .attr("height",function(d){ return d.age*10})
    .attr("x",function(d,i){return i*50;})

另外，也许你想让它们站立而不是悬挂并改变文字方向。

如何更改d3图表数据轴

1 个答案: