線性標尺不使用d3中指定的範圍

Question

出於某種原因，我的圖形將進入我的填充，即使我已將填充納入y值的線性比例。這裏是我的代碼：

$(document).ready(function(){ 

    //padding 
    var padding = { 
    top: 20, 
    right: 20, 
    bottom: 20, 
    left: 20, 
    }; 

    //graph dimensions 
    var w = 1000 
    var h = 500 

    //append and assign variable reference to svg 
    var svg = d3.select('section').append('svg').attr('id', 'graph').attr('width', w).attr('height', h); 

    //get json data 
    d3.json('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json', function(error, data){ 

    //error handling 
    if (error){ 
     console.warn(error); 
    } 

    var dataset = data.data; 

    //minimum and maximum date data points 
    var minDate = new Date(dataset[0][0]); 
    var maxDate = new Date(dataset[274][0]); 

    //scale data to svg dimensions 
    var xScale = d3.time.scale().domain([minDate, maxDate]).range([padding.left, w - padding.right]); 
    var yScale = d3.scale.linear().domain([0, d3.max(dataset, function(d){return d[1];})]).range([h - padding.bottom, padding.top]); 
    console.log(yScale(0)); 
    //make x and y axis 
    var xAxis = d3.svg.axis().orient('bottom').scale(xScale); 

    //generate graph 
    svg.selectAll('rect') 
     .data(dataset) 
     .enter() 
     .append('rect') 
     .attr('x', function(d, i){ 
     return i * ((w - padding.left - padding.right)/dataset.length) + padding.left; 
     }) 
     .attr('y', function(d){ 
     return yScale(d[1]); 
     }) 
     .attr('width', (w - padding.left - padding.right)/dataset.length) 
     .attr('height', function(d){return d[1]}) 
     .attr('fill', '#4682B4'); 

    //generate x and y axix 
    svg.append('g') 
     .attr('class', 'axis') 
     .attr('transform', 'translate(0,' + (h - padding.bottom) + ')') 
     .call(xAxis); 
    }); 
}); 

這是Codepen的頁面。

有沒有人知道爲什麼圖形切割成這樣的x軸？如何解決它，這樣的酒吧開始從底部

Answer 1

我已經找到了答案padding.bottom像素的時候，我改變了高度屬性的SVG到：

.attr('height', function(d){return h - padding.bottom - yScale(d[1])}); 

和它的工作