如何在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