scaleBand 축의 데이터 점과 눈금이 정렬되지 않았습니다.

내 데이터 점과 scaleBand y 축의 값이 정렬되지 않았습니다. 필자는 문서를 읽을 때 제대로 정렬 할 수 없습니다. 기본적으로 정렬은 0.5이므로 축의 두 점 사이에 데이터 포인트가 그려지는 것이 보입니다. 하지만 정렬을 재정의하려고했는데 정렬을 0으로 지정했지만 아무런 변화가없는 것처럼 보입니다. 다음은 내 코드입니다.scaleBand 축의 데이터 점과 눈금이 정렬되지 않았습니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
<title>D3 v4 - linechart</title> 
<style> 
#graph { 
    width: 900px; 
    height: 500px; 
} 
.tick line { 
    stroke-dasharray: 2 2 ; 
    stroke: #ccc; 
} 


.y path{ 
    fill: none; 
    stroke: none; 
} 

</style> 
</head> 

<body> 
<div id="graph"></div>  



<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>  
<script> 
!(function(){ 
    "use strict" 

    var width,height 
    var chartWidth, chartHeight 
    var margin 
    var svg = d3.select("#graph").append("svg") 
    var axisLayer = svg.append("g").classed("axisLayer", true) 
    var chartLayer = svg.append("g").classed("chartLayer", true) 

    var xScale = d3.scaleLinear() 
    var yScale = d3.scaleBand() 
    var align = 0 


    //d3.tsv("data1.tsv", cast, main) 
    d3.json("http://localhost/d32.json",cast) 

    //データの方変換 
    function cast(data) { 
     console.log("got it"); 
     data.forEach(function(data) { 
     console.log(data.Letter); 
     data.Letter = data.Letter; 
     data.Freq = +data.Freq; 
    }); 
     main(data); 
    } 

    function main(data) { 
     console.log("in main"); 
     setSize(data) 
     drawAxis() 
     drawChart(data)  
    } 

    function setSize(data) { 
     width = document.querySelector("#graph").clientWidth 
     height = document.querySelector("#graph").clientHeight 

     margin = {top:40, left:100, bottom:40, right:0 } 


     chartWidth = width - (margin.left+margin.right+8) 
     chartHeight = height - (margin.top+margin.bottom) 

     svg.attr("width", width).attr("height", height) 

     axisLayer.attr("width", width).attr("height", height) 

     chartLayer 
      .attr("width", chartWidth) 
      .attr("height", chartHeight) 
      .attr("transform", "translate("+[margin.left, margin.top]+")") 


     xScale.domain([0, d3.max(data, function(d) { return d.Freq; })]).range([0,chartWidth]) 
     yScale.domain(data.map(function(d) { return d.Letter; })).range([chartHeight, 0]).align(1) 

    } 

    function drawChart(data) { 

    console.log("in drawChart"); 
     var t = d3.transition() 
      .duration(8000) 
      .ease(d3.easeLinear) 
      .on("start", function(d){ console.log("transiton start") }) 
      .on("end", function(d){ console.log("transiton end") }) 


     var lineGen = d3.line() 
      .x(function(d) { return xScale(d.Freq) }) 
      .y(function(d) { return yScale(d.Letter) }) 
      .curve(d3.curveStepAfter) 

     var line = chartLayer.selectAll(".line") 
      .data([data]) 

     line.enter().append("path").classed("line", true) 
      .merge(line) 
      .attr("d", lineGen) 
      .attr("fill", "none") 
      .attr("stroke", "blue") 
      .attr("stroke-width","2px") 
      .attr("stroke-dasharray", function(d){ return this.getTotalLength() }) 
      .attr("stroke-dashoffset", function(d){ return this.getTotalLength() }) 

     chartLayer.selectAll(".line").transition(t) 
      .attr("stroke-dashoffset", 0) 



    chartLayer.selectAll("circle").classed("circle",true) 
    .data(data) 
    .enter().append("circle") 
    .attr("class", "circle") 
    .attr("fill","none") 
    .attr("stroke","black") 
    .attr("cx", function(d) { return xScale(d.Freq); }) 
    .attr("cy", function(d) { return yScale(d.Letter); }) 
    .attr("r", 4); 

    chartLayer.selectAll(".logo").transition(t) 
     .attr("stroke-dashoffset", 0) 


    } 

    function drawAxis(){ 
     var yAxis = d3.axisLeft(yScale) 
      .tickSizeInner(-chartWidth) 

     axisLayer.append("g") 
      .attr("transform", "translate("+[margin.left, margin.top]+")") 
      .attr("class", "axis y") 
      .call(yAxis); 

     var xAxis = d3.axisBottom(xScale) 

     axisLayer.append("g") 
      .attr("class", "axis x") 
      .attr("transform", "translate("+[margin.left, chartHeight+margin.top]+")") 
      .call(xAxis); 

    } 
}()); 
</script>  
</body> 
</html>

출력은 여기에 표시됩니다 :