zoukankan      html  css  js  c++  java
  • [D3] Convert Input Data to Output Values with Linear Scales in D3

    Mapping abstract values to visual representations is what data visualization is all about, and that’s exactly what D3 scales do. Turning a test score into a column height, or a percentage into an opacity requires translating from one set of possible values to another, and linear scales perform a direct, proportional conversion of inputs to outputs. In this lesson we’ll learn the basic API of D3 scales and how to use them.

    var color = d3.scaleLinear()
        .domain([-1, 0, 1])
        .range(["red", "white", "green"]);
    
    console.log(color(-0.5)); // "rgb(255, 128, 128)"
    console.log(color(+0.5)); // "rgb(128, 192, 128)"
    
    // If clamping is enabled, the return value of the scale is always within the scale’s range.
    var number = d3.scaleLinear()
        .domain([0, 100])
        .range([0, 500])
        .clamp(true);
    
    console.log(number(0)); // 0
    console.log(number(50)); // 250
    console.log(number(100)); // 500
    console.log(number(105)); // 500 -- with clamp(true)
    console.log(number(105)); // 525 -- without clamp(true)
    
    var number = d3.scaleLinear()
        .domain([0, 100])
        .range([0, 500]);
    
    // Given a value from the range, returns the corresponding value from the domain.
    console.log(number.invert(500)); // 100
    console.log(number.invert(250)); // 50
    console.log(number.invert(100)); // 20
    console.log(number.invert(0)); // 0 -- with clamp(true)
    console.log(number.invert(-10)); // -2 -- without clamp(true)
  • 相关阅读:
    多态与鸭子类型
    mixin与派生
    4.9作业
    property
    继承
    封装
    《梦断代码》阅读笔记1
    阅读笔记3——《大道至简》第四、五、六章
    阅读笔记2——《大道至简》第二、三章
    阅读笔记1——《大道至简》第一章
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6127376.html
Copyright © 2011-2022 走看看