Question

我正在用D3制作条形图。大部分工作已经完成，但输出的表现并不像我预期的那样，我无法解决问题。

示例数据为this，这是一个JSON文件，包含美国国内生产总值数据。

我的条形图显示了我期望的曲线，虽然数字刚刚开始超过2000，而在数据中，它们刚刚超过200.我试图改变值，但每次我修补{{ 1}}定位和高度，我得到意想不到的结果。

JS：

到目前为止，这是我工作的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)

});

条形图输出不是预期的

1 个答案: