javascript - 条形图的输出不是预期的

我正在用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。

最佳答案

h和图表高度之间有些混淆。这是分别定义了padding，h和chartHeight的updated codepen。

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)

});

关于javascript - 条形图的输出不是预期的，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35040474/