D3 —— 比例尺与坐标 #11

Heqingsong · 2019-08-16T14:02:08Z

线性比例尺

线性比例尺与线性函数类似，计算线性的对应关系

    var liner = d3.scale.linear() // 创建一个线性比例尺
            .domain([0, 500]) // 获取或设定定义域的值
            .range([0, 100]); // 设定或获取值域

    // 返回值域内对应的值
    console.log(liner(50.22)); // 10.044 

    // 返回值域内对应的值
    console.log(liner.invert(50)); // 250 

    // default | false  设置为true,超过任何值域范围的值，都会被收缩到值域范围内
    liner.clamp(true);
    console.log(liner(600)); // 100 最大值域

    // 设置比例尺的输出范围，并四舍五入
    liner.rangeRound([0, 100])
    console.log(liner(90.99)); // 18

    // 扩展比例尺的定义域为一个优化的定义域
    liner.domain([0.12134, 0.46876]).nice();
    console.log(liner.domain()); // [0.1, 0.5]

    // 取得定义域中典型的值
    console.log(liner.ticks(5)); // [0.1, 0.2, 0.3, 0.4, 0.5]

    // 获取一个用来展示刻度值得格式化器
    var ticks = liner.ticks(5);
    var tickFormat = liner.tickFormat(5, '%');
    for(let i = 0; i < ticks.length; i++){
        ticks[i] = tickFormat(ticks[i]);
    }
    console.log(ticks); // ["10%", "20%", "30%", "40%", "50%"]

线性恒等比例尺

在处理像素坐标时有用，输入值是多少像素，在输出显示时也是多少像素

    
    d3.scale.identity().domain([0,100]);

指数比例尺

输入值以指数级变化的数据集

    var pow = d3.scale.pow()
          .exponent(3); // 设置指数比例尺的 指数为3 

    console.log(pow(2)); // 8

    console.log(pow(2) === Math.pow(2,3)); // true

平方根比例尺

平方根比例尺是pow比例尺的特殊类型

    var sqrt = d3.scale.sqrt()
              .domain([0,100])
              .range([0,700]);

    console.log(sqrt(2)); // 98.99494936611666

对数比例尺

对数比例尺与线性比例尺相似，区别是对数比例尺首先对输入数据进行对数变换

    var log = d3.scale.log()
          .domain([1,100])
          .range([0,700])
          .base(2); // 设置对数比例尺的底数为2 

    console.log(log(3)); // 166.99243915188183

量化比例尺

量化比例尺是线性比例尺的变体，输入的域是连续的，使用离散的range，输入数据被分割成不同的片段

    var quantize = d3.scale.quantize()
               .domain([0, 10])
               .range(['#aaa', '#bbb', '#ccc', '#ddd', '#eee']);

    console.log(quantize(7)); // #ddd

分位比例尺

分位数比例尺是线性比例尺的变体，无论输入数据怎么分布，都会被映射成离散值

    var quantile = d3.scale.quantile()
               .domain([0, 2, 4, 10])
               .range([1, 100]);

    console.log(quantile(7)); // 100

    // 查看分段值
    console.log(quantile.quantiles()); // 3

阈值比例尺

阈值比例尺又叫临界值比例尺，是通过设定阈值，将连续的定义域映射到离散的值域里

    var threshold = d3.scale.threshold()
               .domain([0, 10, 30])
               .range(['#aaa', '#bbb', '#ccc', '#ddd']);

    console.log(threshold(7)); // #bbb

    // 通过值域求定义域
    console.log(threshold.invertExtent('#aaa')); // [undefined, 0]
    console.log(threshold.invertExtent('#ccc')); // [10, 30]
    console.log(threshold.invertExtent('#ddd')); // [30, undefined]

时间比例尺

将日期和时间映射到具体的数值

    var time = d3.time.scale()
            .domain([new Date('2015-1-1'), new Date('2016-12-1')])
            .range([0,700])
            .nice();

序数比例尺

通过输入一些离散的值，得到另一些离散的值，这种情况就要考虑序数比例尺

    var ordinal = d3.scale.ordinal() // 构建一个序数比例尺
              .domain([1, 2, 3, 4, 5])
              .range([10, 20, 30, 40, 50]);

    console.log(ordinal(2)); // 20

    // 指定输出范围为连续区间,输出分段值
    ordinal.rangePoints([0, 100]);
    console.log(ordinal.range()); // [0, 25, 50, 75, 100]

    // 设置边界部分留下的空白为 5
    ordinal.rangePoints([0, 100], 5);
    // [27.77777777777778, 38.888888888888886, 50, 61.11111111111111, 72.22222222222223]
    console.log(ordinal.range()); 

    // 指定输出范围为连续区间，刻度点均为整数
    ordinal.rangeRoundPoints([0, 100], 5);
    console.log(ordinal.range()); // [28, 39, 50, 61, 72]

    // 构造一个有10种颜色的序数比例尺
    var colors = d3.scale.category10();
    console.log(colors(1)); // #1f77b4

    // 构造一个有20种颜色的序数比例尺。
    d3.scale.category20()

    // 构造一个另外20种颜色的序数比例尺。
    d3.scale.category20b()

    // 构造一个另外20种颜色的序数比例尺
    d3.scale.category20c()

坐标轴

    <body>
        <style>
            .axis path,
            .axis line{
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }

            .axis text{
                font-family: sans-serif;
                font-size: 11px;
            }
        </style>
        <script>
            var width = 600;
            var height = 600;

            // 添加容器
            var svg = d3.select('body')
                    .append('svg')
                    .attr({
                        'width': width,
                        'height': height
                    })
                    .style({
                        'background-color': '#f1f1f1'
                    });

            // 创建线性比例尺
            var xScale = d3.scale.linear()
                        .domain([0, 10])
                        .range([0, 300]);

            // 创建一个横向的坐标轴
            var axis = d3.svg.axis() // 创建一个坐标轴
                    .scale(xScale) // 设置坐标轴的比例尺
                    .orient('bottom') // 设置坐标轴的方向 top right bottom left
                    .tickFormat(d3.format('+f'));// 设置刻度的格式

            var gAxis = svg.append('g')
                        .attr({
                            'transform': 'translate(80, 80)',
                            'class': 'axis'
                        });

            // 竖向 y 坐标轴 left
            var axisLeft = d3.svg.axis()
                        .scale(xScale)
                        .orient('left')
                        .ticks(5) // 设置坐标轴的分割数，默认 10 
            //                .innerTickSize(2) // 单独设置内部刻度长度
            //                .outerTickSize(4); // 单独设置首尾刻度长度
                        .tickSize(2, 4); // 设置首尾刻度比内部刻度长

            var leftAxis = svg.append('g')
                        .attr({
                            'transform': 'translate(80, 150)',
                            'class': 'axis'
                        });

            // 竖向 y 坐标轴 right
            var axisRight = d3.svg.axis()
                        .scale(xScale)
                        .orient('right')
                        .tickValues([3,4,5,6,7]); // 设置坐标轴的指定刻度，3,4,5,6,7 才显示刻度

            var rightAxis = svg.append('g')
                        .attr({
                            'transform': 'translate(150, 150)',
                            'class': 'axis'
                        });

            gAxis.call(axis);
            leftAxis.call(axisLeft);
            rightAxis.call(axisRight);
        </script>
    </body>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

D3 —— 比例尺与坐标 #11

D3 —— 比例尺与坐标 #11

Heqingsong commented Aug 16, 2019

D3 —— 比例尺与坐标 #11

D3 —— 比例尺与坐标 #11

Comments

Heqingsong commented Aug 16, 2019

线性比例尺

线性恒等比例尺

指数比例尺

平方根比例尺

对数比例尺

量化比例尺

分位比例尺

阈值比例尺

时间比例尺

序数比例尺

坐标轴