가로 막 대형 차트 y 축 정렬

Question

가로 막 대형 차트의 y 축에 문제가 있습니다.

var data = [0, 0, 0, 4, 0, 0, 0, 0, 18, 0, 0, 0, 52, 14, 0, 16]; 

var margin = { left: 20, top: 0  }, 
    width = 420, 
    barHeight = 20, 
    height = barHeight * data.length; 

var xScale = d3.scale.linear() 
    .domain([0, d3.max(data)]) 
    .range([0, width - margin.left]); 

var yScale = d3.scale.linear() 
    .domain([0, data.length]) 
    .range([0, height]); 

var chart = d3.select(".degree-hist") 
    .attr("width", width) 
    .attr("height", barHeight * data.length) 
    .append("g") 
    .attr("transform", function(d, i) { return "translate(" + margin.left + ", 0)"; }); 

var bar = chart.selectAll("g") 
    .data(data) 
    .enter().append("g") 
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); 

bar.append("rect") 
    .attr("width", xScale) 
    .attr("height", barHeight - 1); 

bar.append("text") 
    .attr("x", function(d) { return xScale(d) - 3; }) 
    .attr("y", barHeight/2) 
    .attr("dy", ".35em") 
    .text(function(d) { return d > 0 ? d : ""; }); 

var yAxis = d3.svg.axis() 
    .orient('left') 
    .scale(yScale) 
    .tickSize(2) 
    .tickFormat(function(d, i){ return i + 1; }) 
    .tickValues(d3.range(data.length)); 

chart.append('g') 
    .attr("transform", "translate(0,0)") 
    .attr('id','yaxis') 
    .call(yAxis); 

내가 여기에 문제가 설명했습니다 내가 y 축 레이블을 정렬하지 못했다 어떤 이유로 http://jsfiddle.net/mt556rot/3/

합니다. 내가 속한 술집에 레이블을 정렬하고 싶습니다. 내 예에서는 막대의 위쪽 가장자리에 나타납니다. 또한 진드기는 보이지 않습니다.

이 문제를 해결하는 방법에 대한 아이디어가 있으십니까?

Answer 1

당신은 축 레이블에 막대를 중심으로하지 않는, 그들에 시작 : 당신이 계정에 top 마진을 고려하지 않았기 때문에

또한

bar.append("rect") 
    .attr("width", xScale) 
    .attr("height", barHeight - 1) 
    .attr("y", -barHeight/2); <-- added this to center 

, 당신의 최고 틱 라벨이 차단되고 :

var chart = d3.select(".degree-hist") 
    .attr("width", width) 
    .attr("height", barHeight * data.length + margin.top) 
    .append("g") 
    .attr("transform", function(d, i) { return "translate(" + margin.left + ", " + margin.top + ")"; }); // <-- margin.top into transform with top > 0 

마지막으로, 당신은 당신의 진드기 어떤 스타일을 설정하지 않은 (here에서 CSS) :

#yaxis path, 
#yaxis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

업데이트 됨 fiddle.