條形圖輸出不是預期的

Question

我正在用D3製作條形圖。大部分工作已經完成，但輸出並不像我預期的那樣運行，我無法解決問題。

樣本數據爲this，這是一個JSON文件，其中包含美國國內生產總值數據。

我的條形圖顯示了我期望的曲線，雖然數字剛剛超過2000，但在數據中，它們剛剛開始超過200.我試圖改變值，但每次修改y定位和身高，我得到意想不到的結果。

JS：

var fccDataUrl = 'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json'; 
var dataset; 
var fccData; 

$.getJSON(fccDataUrl, (myData) => { 

    dataset = myData.data; 
    fccData = myData; 
    console.log('dataset', dataset) 
    console.log('fccData', fccData) 

    var w = '800' 
    var h = '500' 
    var padding = 50; 

    var svg = d3.select('body') 
       .append('svg') 
       .attr('width', w) 
       .attr('height', h) 

    var xScale = d3.scale.linear() 
        .domain([1947, 2015]) 
        .range([padding, w - padding]) 

    var yScale = d3.scale.linear() 
        .domain([0, d3.max(dataset, d => d[1])]) 
        .range([h - padding, padding]) 

    var xAxis = d3.svg.axis() 
        .scale(xScale) 
        .orient('bottom') 
        .ticks(10) 

    var yAxis = d3.svg.axis() 
        .scale(yScale) 
        .orient('left') 
        .ticks(10) 

    svg.selectAll('rect') 
     .data(dataset) 
     .enter() 
     .append('rect') 
     .classed('bars', true) 
     .attr('x', (d, i) => i * (w/dataset.length) + 50) 
     .attr('y', d => yScale(d[1]) - 50) 
     .style('width', '4px') 
     .style('height', d => h - yScale(d[1])) 

    svg.append('g') 
     .attr('class', 'axis') 
     .attr('transform', `translate(0, ${h - padding})`) 
     .call(xAxis) 

    svg.append('g') 
     .attr('class', 'axis') 
     .attr('transform', `translate(${padding}, 0)`) 
     .call(yAxis) 

}); 

這是我工作的一個codepen至今。

Answer 1

h和圖表高度之間有一些混淆。這是updated codepen與padding,h和chartHeight分開定義。

var fccDataUrl = 'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json'; 
var dataset; 
var fccData; 

$.getJSON(fccDataUrl, (myData) => { 

    dataset = myData.data; 
    fccData = myData; 
    console.log('dataset', dataset) 
    console.log('fccData', fccData) 

    var w = '800' 
    var h = '500' 
    var padding = {top: 50, bottom: 50, right: 50, left: 50}; 
    var chartWidth = w - padding.left - padding.right; 
    var chartHeight = h - padding.top - padding.bottom; 

    var svg = d3.select('body') 
     .append('svg') 
     .attr('width', w) 
     .attr('height', h) 
     .append("g") // apply the transform to the parent elem instead of individually. 
     .attr("transform", `translate(${padding.left}, ${padding.top})`) 

    var xScale = d3.scale.linear() 
     .domain([1947, 2015]) 
     .range([0, chartWidth]) // no need to account for padding anymore 

    var yScale = d3.scale.linear() 
     .domain([0, d3.max(dataset, d => d[1])]) 
     .range([chartHeight, 0]) // no need to account for padding anymore 

    var xAxis = d3.svg.axis() 
     .scale(xScale) 
     .orient('bottom') 
     .ticks(10) 

    var yAxis = d3.svg.axis() 
     .scale(yScale) 
     .orient('left') 
     .ticks(10) 

    svg.selectAll('rect') 
    .data(dataset) 
    .enter() 
    .append('rect') 
    .classed('bars', true) 
    .attr('x', (d, i) => i * (w/dataset.length)) // no need to account for padding anymore 
    .attr('y', d => yScale(d[1])) // no need to account for padding anymore 
    .style('width', '4px') 
    .style('height', d => chartHeight - yScale(d[1])) 

    svg.append('g') 
    .attr('class', 'axis') 
    .attr('transform', `translate(0, ${chartHeight})`) // no need to account for padding anymore 
    .call(xAxis) 

    svg.append('g') 
    .attr('class', 'axis') 
    //.attr('transform', `translate(${padding}, 0)`) // no need to account for padding anymore 
    .call(yAxis) 

});