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)
  • 相关阅读:
    二级缓存配置和原理
    延迟加载
    proxy和no-proxy的策略取值的区别
    inverse理解
    Java Spring mvc 操作 Redis 及 Redis 集群
    章节6 关联映射 (转载)
    8.28笔记
    8.26函数相关练习
    8.26 课堂自由笔记 还有考皮的老师笔录
    大话设计模式1.0.2-----策略模式 单一职责原则 和 开放-封闭原则
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6127376.html
Copyright © 2011-2022 走看看