D3.js 텍스트를 추가 할 때의 세로 막 대형 차트

allignedleft의 예제에서 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의 텍스트의 수직 정렬입니다. CSS에

vertical-align: bottom;

을 추가하면 다시 작동합니다. 일부 div는 텍스트가 너무 작습니다. 이 경우 라벨은 나머지 라벨과 정렬되지 않습니다. 라벨에 별도의 div를 만들어 적절히 배치하는 것이 좋습니다.

출처

2013-04-18 18:52:25

감사합니다. 그게 그랬어. – sriram

D3.js 텍스트를 추가 할 때의 세로 막 대형 차트

답변

관련 문제