D3 比例尺

xiaoxiao2021-02-28  46

D3 中的比例尺,定义域(domain)值域(range)会是一一对应的关系.使用比例尺可以根据盒子的大小来自适应图片的大小.

var linear = d3.scale.linear()

线性比例尺

var dataset = [0,1,2,3,4,5,6,7,8,9]; var min = d3.min(dataset); var max = d3.max(dataset); var linear = d3.scale.linear() .domain([min, max]) .range([0, 900]); linear(0.9); //返回 90 linear(2.3); //返回 230 linear(3.3); //返回 330

序数比例

var index = [0, 1, 2, 3, 4]; var alpha = ["a", "b", "c", "d", "e"] var ordinal = d3.scale.ordinal() .domain(index) .range(aplha); ordinal(0); //返回 a ordinal(2); //返回 c ordinal(4); //返回 e

d3.scale.linear() 1.nice()告诉比例尺取得为 range() 设置的任何值域,把两端的值扩展到最接近的整数。 2.用 rangeRound() 代替 range() 后,则比例尺输出的所有值都会舍入到最接近的整数值。 3.clamp()默认情况下,线性比例尺可以返回指定范围之外的值。

var scale = d3.scale.linear() .domain([0.123, 4.567]) .range([0, 500]) .nice();

比例尺类型

类型描述linear线性sqrt平方根比例尺pow幂比例尺log对数比例尺quantize输出范围为独立的值的线性比例尺quantile与 quantize 类似,但输入值域是独立的值ordinal使用非定量值(如类名)作为输出的序数比例尺d3.time.scale()针对日期和时间值的一个比例尺方法d3.scale.category10(),d3.scale.category20(),d3.scale.category20b(),d3.scale.category20c()能够输出 10 到 20 种类别颜色的预设序数比例尺
转载请注明原文地址: https://www.6miu.com/read-2620358.html

最新回复(0)