D3.js添加文字时的柱状图反演

我想创建一个基本的柱状图，使用alllistleft中的div和一个麦克风发布的div。除了当我添加文本时，图表工作，它逆转。D3.js添加文字时的柱状图反演

<!DOCTYPE html> 
<head> 
<style type="text/css"> 

div.abc { 
display: inline-block; 
width: 20px; 
height: 75px; 
background-color: teal; 
margin-right: 2px; 
} 

</style> 
</head> 
<body> 
<script type="text/javascript" src="http://d3js.org/d3.v2.js?2.8.1"></script> 
<script> 

var dataset = [16,13,8,2,1,10,0,5,24,15,2,6,12]; 


d3.select("body").selectAll("div") 
.data(dataset) 
.enter() 
.append("div") 
.attr("class", "abc") 
.style("height", function(d) { 
    var barHeight = d * 5; 
    return barHeight + "px"; 
}) 
.style("margin-top",function(d) { 
    var barHeight = d * 5; 
    return 500 - barHeight; 
}) 
.style("text-align","center") 
.style("color","black") 
.text(function (d) { return d; }); 
</script> 
</body> 
</html>

感谢

斯利拉姆

来源

2013-04-18 sriram

的问题是在div的文本的垂直对齐方式。如果你添加了

vertical-align: bottom;

到你的CSS，它应该再次工作。请注意，您的某些div对于文本来说太小了。在这些情况下，标签不会与其他标签对齐。我建议您为标签创建单独的div并相应地放置它们。

来源

2013-04-18 18:52:25

谢谢！它做到了。 – sriram

D3.js添加文字时的柱状图反演

回答

相关问题