d3 막 대형 차트 축 정렬

Question

막 대형 차트 플로팅 할 때 http://bl.ocks.org/mbostock/3019563 에 설명 된 여백 규칙을 사용하려고합니다. 그러나이 기본 예제에서는 을 볼 수 있으므로 막대가 x 축과 정렬되지 않습니다. http://bl.ocks.org/kyrre/bbd29f225173825797e3. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

var data = [ 
      {x: "Differential Geometry", y: 10}, 
      {x: "Statistical Physics", y: 5}, 
      {x: "Music", y: 3} 
      ] 


var margin = {top: 20, right: 10, bottom: 20, left: 50}; 

var width = 500 - margin.left - margin.right; 
var height = 320 - margin.top - margin.bottom; 

var y = d3.scale.linear() 
      .domain([0, d3.max(data, function(x) { 
       return x.y; 
      })]) 
      .range([0, height]); 

var x = d3.scale.ordinal() 
      .domain(_.map(data, function(d) { return d.x;})) 
      .rangeRoundBands([0, width], 0.10); 

var xAxis = d3.svg.axis() 
      .scale(x) 
      .orient("bottom"); 

var yAxis = d3.svg.axis() 
      .scale(y) 
      .orient("left"); 



var svg = d3.select("body") 
      .append("svg") 
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height + margin.top + margin.bottom) 
      .append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var rect = svg.selectAll("rect") 
       .data(data) 
       .enter() 
       .append("rect") 
       .attr("x", function(d) { 
        return x(d.x); 
       }) 
       .attr("y", 0) 
       .attr("height", function(d) { 
        return y(d.y); 
       }) 
       .attr("fill", function(d) { return "blue";}) 
       .attr("width", 20); 

svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

svg.append("g") 
    .attr("class", "y axis") 
    .attr("transform", "translate(0,0)") 
    .call(yAxis); 

Answer 1

y 좌표는 위로부터 계산됩니다 (즉, 0은 이미지의 상단에 있습니다). y을 총 빼기 높이로 설정하면 작동합니다.

.attr("y", function(d) { return (height - y(d.y)); })