D3 散点图中的一个点低于预期值

Question

一切都很好，但那个点应该是 1 和 0 之间的 ~1/4。我相信这与比例有关，数据看起来不错，其他每个点看起来都不错。如果我可以提供任何其他信息，请告诉我。谢谢！

这是一些其他细节，因为如果没有更多细节，我将无法发布。

带断点的散点图

let xScale
let yScale

let xAxis
let yAxis

let width = 800
let height = 500
let padding = 40

let svg = d3.select('svg')
let tooltip = d3.select('#tooltip')

let generateScales = () => {
    let years = []
    let keys = Object.keys(crpdata)
    keys.forEach(element => {
        years.push(Number(element));
    });
    let subs = []
    keys.forEach(element => {
        subs.push(crpdata[element]["commoditySubsidies"]);
    });

    xScale = d3.scaleLinear()
                        .domain([d3.min(years) - 1, d3.max(years) + 1])
                        .range([padding, width-padding])

    yScale = d3.scaleLinear()
                        .domain([d3.max(subs) / 1_000_000, d3.min(subs) / 1_000_000])
                        .range([padding, height-padding])

}

let drawCanvas = () => {
    svg.attr('width', width)
    svg.attr('height', height)
}

let drawPoints = () => {
    let years = Object.keys(crpdata)

    let convertedData = []

    years.forEach(year => {
        let data = {"year": year,
         "conservationSubsidies": crpdata[year]["conservationSubsidies"],
         "disasterSubsidies": crpdata[year]["disasterSubsidies"],
         "commoditySubsidies": crpdata[year]["commoditySubsidies"]}
        convertedData.push(data)
    });

    svg.selectAll('circle')
            .data(convertedData)
            .enter()
            .append('circle')
            .attr('class', 'dot')
            .attr('r', '6')
            .attr('data-xvalue', (item) => {
                console.log(item)
                return item["year"]
            })
            .attr('data-yvalue', (item) => {
                return item["commoditySubsidies"]
            })
            .attr('fill', (item) => {
                return 'lightgreen'
            })
            .attr('cx', (item) => {
              return xScale(item['year'])
            })         
            .attr('cy', (item) => {

                return yScale(item["commoditySubsidies"] / 1_000_000)
            })
            .on('mouseover', (item) => {
                tooltip.transition()
                    .style('visibility', 'visible')
                
                tooltip.text(item['year'] + ' - $' + item['commoditySubsidies'])
                tooltip.attr('data-year', item['Year'])
            })
            .on('mouseout', (item) => {
                tooltip.transition()
                    .style('visibility', 'hidden')
            })
}

let generateAxes = () => {

    xAxis = d3.axisBottom(xScale)
                .tickFormat(d3.format('d'))  

    yAxis = d3.axisLeft(yScale)
                .tickFormat(d3.format('d'))
    svg.append('g')
        .call(xAxis)
        .attr('id', 'x-axis')
        .attr('transform', 'translate(0, ' + (height-padding) +')')

    svg.append('g')
        .call(yAxis)
        .attr('id', 'y-axis')
        .attr('transform','translate(' + padding + ', 0)')
}

async function getCRPData(){
    let returnData
    await fetch(url2, {method: "GET"})
    .then(res => res.json())
    .then(data => returnData = data);
    crpdata = await returnData;
}

let crpPromise = getCRPData()

async function createGraph(){
    await crpPromise;
    console.log(crpdata)
    drawCanvas()
    generateScales()
    generateAxes()
    drawPoints()
}

createGraph()

Answer 1

yScale = d3.scaleLinear()
    .domain([d3.max(subs) / 1_000_000, 0)
    .range([padding, height-padding])

问题是我将最小值设为最低值，即那个点。我通过使比例从 0 开始来纠正它