如何在d3.js中將條形圖從水平改爲垂直？

-1

我已經做了水平條形圖使用d3.js我試圖做水平，但我沒有得到它。可以有人提供給我一個解決方案嗎？如何在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>

來源

2017-05-14 user3880989

你的問題不明確做了水平條形圖的代碼 - 無論你是想創建水平或垂直條圖表。無論哪種情況，D3站點https://bl.ocks.org都有很多這兩種類型圖表所需的代碼示例。

您所顯示的代碼對於圖表來說是不夠的。你需要附加一個SVG元素以及它的設置，代碼使它成爲一個實際的條形圖，繪製你的x軸和y軸，等等。看看該網站的條形圖，你會更清楚地知道你需要添加什麼。

默認爲一個條形圖是豎條。如果你想寫一個水平條形圖，看看這個答案D3js - change Vertical bar chart to Horizontal bar chart。

我沒有代表標誌作爲重複或評論在這裏，所以我希望這是可以接受的。

來源

2017-05-15 09:55:01

如何在d3.js中將條形圖從水平改爲垂直？

回答

相關問題