如何在y轴上移动d3刻度线

Question

我有一个条形图see plunker问题是我想将y轴刻度线移动到rects的中间左侧，但它们出现在顶部和底部。我似乎无法在不破坏图表的情况下移动它们。

我的代码

var info = [{ 
     name: "Walnuts", 
     value: 546546 
     }, { 
     name: "Almonds", 
     value: 456455 
     } 

    ]; 

    /* Set chart dimensions */ 
    var width = 960, 
     height = 500, 
     margin = { 
     top: 10, 
     right: 10, 
     bottom: 20, 
     left: 60 
     }; 

    //subtract margins 
    width = width - margin.left - margin.right; 
    height = height - margin.top - margin.bottom; 

    //sort data from highest to lowest 
    info = info.sort(function(a, b) { 
     return b.value - a.value; 
    }); 

    //Sets the y scale from 0 to the maximum data element 


    var max_n = 0; 
    var category = [] 
    for (var d in info) { 
     max_n = Math.max(info[d].value, max_n); 
     category.push(info[d].name) 
    } 

    var dx = width/max_n; 
    var dy = height/info.length; 

    var y = d3.scale.ordinal() 
     .domain(category) 
     .range([0, height]); 

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

    var svg = d3.select("#chart") 
     .append("svg") 
     .attr("width", "100%") 
     .attr("height", "100%") 
     .attr('preserveAspectRatio', 'xMidYMin') 
     .attr("viewBox", '0 0 ' + parseInt(width + margin.left + margin.right) + ' ' + parseInt(height + margin.top + margin.bottom)) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    svg.selectAll(".bar") 
     .data(info) 
     .enter() 
     .append("rect") 
     .attr("class", function(d, i) { 
     return "bar" + d.name; 
     }) 
     .attr("x", function(d, i) { 
     return 0; 
     }) 
     .attr("y", function(d, i) { 
     return dy * i; 
     }) 
     .attr("width", function(d, i) { 
     return dx * d.value 
     }) 
     .attr("height", dy) 
     .attr("fill", function(d, i) { 
     if (d.name == 'Walnuts') { 
      return 'red' 
     } else { 
      return 'green' 
     } 
     }); 

    var y_xis = svg.append('g') 
     .attr('id', 'yaxis') 
     .call(yAxis); 

Answer 1

您正在使用范围在y轴上这样的：

var y = d3.scale.ordinal() 
     .domain(category) 
     .range([0, height]); 

您应该使用 'rangeRoundBands' 由于Y规模为序

var y = d3.scale.ordinal() 
         .domain(category) 
       .rangeRoundBands([0, height], .1); 

工作代码here