条形图输出不是预期的

Bar chart output isn't what's expected

本文关键字：输出 条形图      更新时间：2023-09-26

我正在用D3制作条形图。大部分工作都已完成，但输出的行为不符合我的预期，我无法找出问题所在。

示例数据是这样的，它是一个 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)
});

这是我到目前为止的工作的代码笔。

h 和图表高度之间存在一些混淆。下面是一个更新的代码笔，其中分别定义了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)
});
相关文章：