交互式数据可视化－D3.js（三）比例尺

huhud 发布于2019-08-02 11:54 / 3116人阅读

摘要：设置为，则所有超出值域范围的值，都会被收缩到值域之内。指数比例尺相对线性比例尺多出一个用于指定指数。这段代码中相当于定义一个线性比例尺。使用量子比例尺后定义域将被分成这段，分别对应值域的个值。

线性比例尺

线性比例尺是常用比例尺常用方法有：

var linear = d3.scaleLinear() - 创建一个定量的线性比例尺.

linear.domain([numbers]) - 定义或获取定义域

linear.range([values]) - 定义或获取值域

linear(x) - 输入一个定义域内的值，返回一个值域的值

linear.invert(y) - 输入一个值域的值，返回一个定义域的值

linear.rangeRound([values]) - 代替range(), 比例尺的输出值会进行四舍五入返回整型

linear.clamp([boolean]) - 默认flase，当比例尺接受一个超出定义域范围的值当时候，依然能够按照同样的计算方法得到一个值，这个值是超出值域范围的。设置为true，则所有超出值域范围的值，都会被收缩到值域之内。

linear.nice([count]) - 将定义域的值扩展成比较理想的值并非四舍五入

linear.ticks([count]) - 设定或获取坐标轴刻度

大致的使用形式:

var linear = d3.scaleLinear().domain([0, 90]).rangeRound([0, 100]).clamp(true);
console.log(linear(95));  // 100
console.log(linear.nice().ticks(9)); //[0, 10, 20, 30, 40, 50, 60, 70, 80, 90]
console.log(linear.range()); //[0, 100]

指数，量子，阈值比例尺

比例尺中很多方法都是相同的，例如domain(), range(), invert()等，名称和作用都是相同的，下面指出一些不同的地方。

指数比例尺

相对线性比例尺多出一个exponent()用于指定指数。使用方法如下：

var pow = d3.scalePow().exponent(3).domain([0, 3]).rangeRound([0, 90]);
console.log(pow(2)); //27

指数为3，输入为2。这段代码中相当于定义一个线性比例尺。定义域为[0, 27], 值域为[0, 90]，当计算2的3次方得到的结果为8，在对这个结果应用线性比例尺，最终到27，验证着一点，请看如下代码：

var pow = d3.scalePow().exponent(3).domain([0, 3]).rangeRound([0, 90]);
var linear = d3.scaleLinear().domain([0, Math.pow(3, 3)]).rangeRound([0, 90]);
console.log(pow(2)); //27
console.log(linear(Math.pow(2, 3))); //27

量子比例尺

量子比例尺定义域是连续的。值域是离散的，结果是对应的离散值。

var quantize = d3.scaleQuantize().domain([0, 10]).range(["a", "b", "c", "d", "e"]);
console.log(quantize(1)) //a
console.log(quantize(4.1)) //c

使用量子比例尺后定义域将被分成[0, 2],[2, 4],[4, 6],[6, 8],[8, 10]这5段，分别对应值域的5个值。量子比例尺非常适合处理‘数值对应颜色’的问题

阈值比例尺

阈值比例尺和量子比例尺类似，阈值比例尺是将连续的定义域映射到离散的值域里。

var threshold = d3.scaleThreshold().domain([0, 2, 4, 6, 8]).range(["a", "b", "c", "d", "e"]);
console.log(threshold(3)) //c
console.log(threshold.invertExtent("b")) // [0, 2]

量子和阈值十分相似，都是将连续的定义域映射到离散的值域里。

序数比例尺 序数比例尺

序数比例尺的定义域和值域都是离散的，通过输入一些离散的值(如名称，序号，ID号等)，要得到另一些离散的值(如颜色，头衔等)，这时就要考虑序数比例尺。常用方法有:

var ordinal = d3. scaleOrdinal() - 创建一个序数比例尺.

ordinal(x) - 根据输入值计算对应的输出值.

ordinal.domain([values]) - 设置输入范围.

ordinal.range([values]) - 设置输出范围.

ordinal.unknown([values]) - 设置未知输入的输出值.
大致的使用形式:

var ordinal = d3.scaleOrdinal().domain(["a", "b", "c", "d", "e"]).range([0, 2, 4, 6, 8]).unknown("超出输入范围");
console.log(ordinal("a")) // 0
console.log(ordinal("g")) // 超出输入范围

坐标轴

坐标轴组件可以将scales显示为人类友好的刻度标尺参考，减轻了在可视化中的视觉任务。坐标轴相关的常用方法如下。
d3.axisLeft(linear) - 使用给定的 scale 构建一个刻度在左的坐标轴生成器

d3.axisBottom(linear) - 使用给定的 scale 构建一个刻度在下的坐标轴生成器

d3.axisRight(linear) - 使用给定的 scale 构建一个刻度在右的坐标轴生成器

d3.axisTop(linear) - 使用给定的 scale 构建一个刻度在上的坐标轴生成器

axis.ticks([argument...]) - 设定或获取坐标轴的分割数。

axis.tickValues([argument...]) - 指定 values 数组，则使用指定的数组作为刻度而不是自动计算刻度

axis.tickPadding([padding]) - 设置刻度和刻度文本之间的间距

大致的使用形式:

var linear = d3.scaleLinear().domain([1000, 0]).rangeRound([0, 250])
var axisLeft = d3.axisLeft(linear).ticks(4);
var svg = d3.select("#axis").append("svg").attr("width", "400").attr("height", "300");
var gLeft = svg.append("g").attr("transform", "translate(40, 20)").call(axisLeft);

服务器托管超融合服务器 d3.js数据可视化实战大数据可视化 d3.js d3.js数据可视化实战手册交互式数据可视化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53195.html

交互式数据可视化－D3.js（三）比例尺

摘要：设置为，则所有超出值域范围的值，都会被收缩到值域之内。指数比例尺相对线性比例尺多出一个用于指定指数。这段代码中相当于定义一个线性比例尺。使用量子比例尺后定义域将被分成这段，分别对应值域的个值。线性比例尺线性比例尺是常用比例尺常用方法有： var linear = d3.scaleLinear() - 创建一个定量的线性比例尺. linear.domain([numbers]) - ...

graf 2019-08-23 12:42 评论0 收藏0
D3.js可视化前端框架的使用要点

摘要：该事件不会区分字母的大小写，例如和被视为一致。这些布局的作用都是将某种数据转换成另一种数据，而转换后的数据是利于可视化的。而有元素与数据对应的部分称为。 1.安装

MASAILA 2019-08-22 14:57 评论0 收藏0
vue.js + d3.js 封装可视化组件 —— 条形统计图（一）

摘要：前言在开始之前，希望读者听说过或者了解过以下名词一套用于构建用户界面的框架将强大的可视化组件和数据驱动的方法结合到操作中的库在这里我想说一句，这是我接触的比较强大的构建数据可视化页面的库数据可视化将大型数据集中的数据以图形图像形式表示，并利前言在开始之前，希望读者听说过或者了解过以下名词 vue.js一套用于构建用户界面的js框架 d3.js将强大的可视化组件和数据驱动的方法结...

jone5679 2019-05-28 18:44 评论0 收藏0
交互式数据可视化－D3.js（一）

摘要：如其中，和表示绘制区域的宽高，表示版本号。下面分别是绘制一个多边形和折线路径标签功能最丰富，以上图形都可以使用路径制作出来，用法与折线类似给出一个坐标点在坐标前添加一个英文字母，表示如何运动到此坐标点点。英文字符按照功能分为五类。在D3中会穿插SVG 方便大家对D3对使用 SVG简介可缩放矢量图(scalabel vector graphics)，是用于描述二维矢量图形的一种图形格...

MASAILA 2019-08-20 10:39 评论0 收藏0
11个React Native 组件库和 Javascript 数据可视化库

摘要：数据可视化库超过的的可能是最流行和最广泛的数据可视化库。是一组组件，用于高效地渲染大型列表和表格数据。一种优雅而灵活的方式，可以利用组件来支持实际的数据可视化。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ React Native 组件库 1. NativeBase showImg(https://segmentfault.com/img/bVbrLHH?w=...

tangr206 2019-08-23 17:11 评论0 收藏0