d3 scaleLinear function returns multipled value-CodePudding

I'm struggling with this code for an hour.

This code return max range with multipled by index

What's the problem?

    const xLineScale = scaleLinear()
        .domain(pointData.map((data, index) => index))
        .range([0, dimension.width])

    console.log(pointData.map((data, index) => index))                //chart.js:33
    console.log(xLineScale.range())                                   //chart.js:34

    pointData.map((v, i) => {
        console.log(xLineScale(i))                            //chart.js:37
    })

CodePudding user response：

Regular Continuous Scales

You are specifying more than two items for your domain. For your intended use case, you only need a two item array in .domain:

Change:

.domain(pointData.map((data, index) => index))

To:

.domain([0, pointData.length - 1])

Piecewise Scales

When you specify more than two items in your domain, you are creating a piecewise linear scale (see https://github.com/d3/d3-scale/blob/main/README.md#continuous_domain). The number of items in the domain should correspond to the number of items in the range, otherwise the extra ones are ignored. Since your range only has two items in it, your original code is effectively setting the domain to [0, 1].