Question

我使用d3.js完成了水平条形图我试图横向进行，但我没有得到它。任何人都可以为我提供解决方案吗？

这是我使用d3.js

完成的水平条形图的代码

＆＃13;

<html>
<body>

<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
.chart div{

font:10px sans-serif;
background-color:blue;
text-align:right;
padding:10px;

margin:1px;
color:white;


}

</style>

<div class="chart">


</div>



<script>
var data = [4, 8, 15, 16, 23, 42,76];

d3.select(".chart")
.selectAll("div") .data(data)
  .enter().append("div")
.style("width", function(d) { return d*10 + "px"; })
    .text(function(d) { return d; });


</script>

＆＃13;

Answer 1

您的问题不明确 - 您是否想要创建水平或垂直条形图。在任何一种情况下，D3网站https://bl.ocks.org都有许多类型图表所需代码的例子。

您显示的代码对于图表来说是不够的。您需要附加一个SVG元素及其设置，代码使其成为实际条形图，绘制您的x和y轴等等。看一下该网站的条形图，您就可以更清楚地了解需要添加的内容。

条形图的默认是竖条。如果您要编写水平条形图，请查看此答案D3js - change Vertical bar chart to Horizontal bar chart。

我没有将rep标记为重复或评论，所以我希望这是可以接受的。

如何在d3.js中将条形图从水平变为垂直？

1 个答案: