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)
  • 相关阅读:
    kernel 于ioctl申请书
    顺时针打印矩阵
    HDU 1557 权利指数 国家压缩 暴力
    从混沌到有序--熵
    分层思想总结
    什么是分层架构模式
    分层设计
    分层设计思想
    软件的生长方式
    设计模式、SOLID原则:组件与联系
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6127376.html
Copyright © 2011-2022 走看看