02-D3.js d3.scaleLinear()线性比例尺_d3js scalelinear-CSDN博客

本文链接：https://blog.csdn.net/gaowxx/article/details/148775200

Data Visualization + D3.js • SuperHiLearn how to create interactive, engaging experiences using HTML, CSS, SVG and Javascript.https://www.superhi.com/catalog/data-visualization-with-d3 Linear scales | D3 by ObservableThe JavaScript library for bespoke data visualizationhttps://d3js.org/d3-scale/linear

声明线性比例尺的映射，然后在.attr()中设置横向柱图各个柱子的位置与高度时使用。

     const barScale = d3.scaleLinear()
            .domain([0, 2000])
            .range([1, 112])

【效果图】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://rsms.me/">
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
    <link rel="stylesheet" href="./style.css">
</head>

<body>

    <main>
        <h1>Today</h1>

        <svg width="900" height="200"></svg>

    </main>
    <script text="script" src="./d3.min.js"></script>
    <script text="script" src="data.js"></script>
    <script>
        const todaySvg = d3.select('svg')

        const barScale = d3.scaleLinear()
            .domain([0, 2000])
            .range([1, 112])

        todaySvg
            .selectAll('rect')
            .data(todayData)
            .enter()
            .append('rect')
            .attr('x', (d, i) => { return i * 36 })
            .attr('y', (d, i) => { return 112 - barScale(d) })
            .attr('width', 24)
            .attr('height', (d, i) => { return barScale(d) })
    </script>

</body>

</html>