如何在 d3.js 中将条形图从水平更改为垂直？答案

【问题标题】：how to change the bar chart from horizontal to vertical in d3.js?如何在 d3.js 中将条形图从水平更改为垂直？
【发布时间】：2017-10-13 03:49:13
【问题描述】：

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

这是我使用 d3.js 完成的水平条形图代码

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

【问题讨论】：

标签： javascript html css d3.js

【解决方案1】：

您的问题不清楚 - 您是要创建水平条形图还是垂直条形图。无论哪种情况，D3 站点https://bl.ocks.org 都提供了两种图表所需代码的许多示例。

您显示的代码不足以制作图表。您需要附加一个 SVG 元素及其设置、使其成为实际条形图的代码、绘制 x 和 y 轴等等。看看那个网站上的条形图，你就会更清楚地知道你需要添加什么。

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

我没有代表在这里标记为重复或评论，所以我希望这是可以接受的。

【讨论】：