[D3] Convert Input Data to Output Values with Linear Scales in D3

最新推荐文章于 2021-03-29 11:47:55 发布

转载最新推荐文章于 2021-03-29 11:47:55 发布 · 89 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/6127376.html

本文详细介绍了如何使用D3.js中的线性比例尺进行数据可视化操作。通过将抽象数值映射到视觉表现形式，实现了从一组可能的输入值到另一组输出值的直接、成比例转换。此外，还探讨了比例尺的域、范围设定及其相关方法如invert和clamp的应用。

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)

转载于:https://www.cnblogs.com/Answer1215/p/6127376.html