提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

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

to in with Data input VALUES convert output
2023-09-14 08:59:19 时间

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)

 

相关文章