D3.js的v5版本入门教程（第七章）

比例尺在D3.js中是一个很重要的东西，我们可以这样理解d3.js中的比例尺——一种映射关系，从domain映射到range域（为什么会是domain和range呢？等一下你就会看到，因为我们在建立比例尺是常常会用到domain()和range()两个函数，当然不是绝对的，D3中有很多类型的比例尺）

下面介绍在本套教程中常用的两种比例尺

线性比例尺
序数比例尺    
    线性比例尺

domain域和range域都可以连续变化

<body>

<script>

var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];

var min = d3.min(dataset);//得到最小值

var max = d3.max(dataset);//得到最大值

var scaleLinear = d3.scaleLinear()

.domain([min,max])

.range([0,300]);

document.write("scaleLinear(1)输出："+scaleLinear(1));

d3.select("body").append("br");//换行

document.write("scaleLinear(2)输出："+scaleLinear(2));

d3.select("body").append("br");

document.write("scaleLinear(3.3)输出："+scaleLinear(3.3));

</script>

</body>

运行结果：

代码说明：

-var scaleLinear = d3.scaleLinear()
    .domain([min,max])

.range([0,300]);也就是[0.9,3.3]映射[0,300]

-scaleLinear(3.3)，由映射关系可以知道，这里的输出为300，实际上的输出也是这样

序数比例尺

domain域和range域是离散的，也就是数组

<body>

<script>

var index = [0,1,2,3,4];

var color = ["red","blue","yellow","black","green"];

var scaleOrdinal = d3.scaleOrdinal()

.domain(index)

.range(color);

document.write("scaleOrdinal(1)输出："+scaleOrdinal(1));

d3.select("body").append("br");//换行

document.write("scaleOrdinal(2)输出："+scaleOrdinal(2));

d3.select("body").append("br");

document.write("scaleOrdinal(4)输出："+scaleOrdinal(4));

</script>

</body>

运行结果：

代码说明：

-var scaleOrdinal = d3.scaleOrdinal()
    .domain(index)

.range(color);建立一个序数比例尺

使用比例尺来建立上一章的柱状图

<body>

<svg width="960" height="600"></svg>

<script>

var marge = {top:60,bottom:60,left:60,right:60}

var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ]; 

//定义一个线性比例尺

var scaleLinear = d3.scaleLinear()

.domain([0,d3.max(dataset)])

.range([0,300]);

var svg = d3.select("svg");

var g = svg.append("g")

.attr("transform","translate("+marge.top+","+marge.left+")");

var rectHeight = 30;

g.selectAll("rect")

.data(dataset)

.enter()

.append("rect")

.attr("x",20)

.attr("y",function(d,i){

return i*rectHeight;

})

.attr("width",function(d){

return scaleLinear(d);//设置宽,并在这里使用比例尺

})

.attr("height",rectHeight-5)

.attr("fill","blue");

</script>

</body>

运行结果：

代码说明：

-.attr("width",function(d){
    return scaleLinear(d);//设置宽,并在这里使用比例尺

})可以发现，我们在这里使用比例尺

效果浏览：点击浏览效果

源码浏览：点击源码浏览
————————————————
版权声明：本文为CSDN博主「数星星等天明」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34414916/article/details/80029808

D3.js的v5版本入门教程（第七章）—— 比例尺的使用的更多相关文章

  1. D3.js的v5版本入门教程（第九章）——完整的柱状图

    D3.js的v5版本入门教程(第九章) 一个完整的柱状图应该包括的元素有——矩形.文字.坐标轴,现在,我们就来一一绘制它们,这章是前面几章的综合,这一章只有少量新的知识点,它们是 d3.scaleBa ...

  2. D3.js的v5版本入门教程（第十三章）—— 饼状图

    D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...

  3. D3.js的v5版本入门教程（第十二章）—— D3.js中各种精美的图形

    D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并 ...

  4. D3.js的v5版本入门教程（第十一章）——交互式操作

    D3.js的v5版本入门教程(第十一章) 与图形进行交互操作是很重要的!所谓的交互操作也就是为图形元素添加监听事件,比如说当你鼠标放在某个图形元素上面的时候,就会显示相应的文字,而当鼠标移开后,文字就 ...

  5. D3.js的v5版本入门教程（第八章）—— 坐标轴

    D3.js的v5版本入门教程(第八章) D3中没有现成的坐标轴图形,需要我们自己用其他组件拼凑而成.D3中提供了坐标轴组件,使得我们在SVG中绘制一个坐标轴变得像添加一个普通元素那样简单 为了表绘制一 ...

  6. D3.js的v5版本入门教程（第五章）—— 选择、插入、删除元素

    D3.js的v5版本入门教程(第五章) 1.选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的<body>中有 ...

  7. D3.js的v5版本入门教程（第三章）—— 选择元素和绑定数据

    D3.js的v5版本入门教程(第三章) 在D3.js中,选择元素和绑定元素是最基本的内容,也是很重要的内容,等你看完整个教程后你会发现,这些D3.js教程都是在选择元素和绑定元素的基础上展开后续工作的 ...

  8. D3.js的v5版本入门教程（第四章）—— 理解Update、Enter、Exit

    D3.js的v5版本入门教程(第四章) Update.Enter.Exit是D3.js中很重要的概念,下面来讲一下它们到底是什么?(当你看完后.你就会知道如果数据集个数和选择集个数不匹配的情况下使用d ...

  9. D3.js的v5版本入门教程（第十章）

    在这一章我们干点有趣的事——让我们上一章绘制的图表动起来,这样岂不是很有意思 为了让图表动起来,我们还是需要以下新的知识点 .attr(xxx) .transition() .attr(xxx),tr ...

随机推荐

  1. Excel表格快速将公式运用到一整列

    假设你的公式在B2单元格,需要复制公式到B3:B999,那么你先选择包含公式单元格的所有需要复制公式的单元格(B2:B999),然后按Ctrl+D即可全部填充.

  2. Python进阶(八)----模块,import , from import 和 `__name__`的使用

    Python进阶(八)----模块,import , from import 和 __name__的使用 一丶模块的初识 #### 什么是模块: # 模块就是一个py文件(这个模块存放很多相似的功能, ...

  3. 换个语言学一下 Golang （6）——数组，切片和字典

    在上面的章节里面,我们讲过Go内置的基本数据类型.现在我们来看一下Go内置的高级数据类型,数组,切片和字典. 数组(Array) 数组是一个具有相同数据类型的元素组成的固定长度的有序集合.比如下面的例 ...

  4. Linux基础-7.Linux网络基础设置

    装好Linux,Linux一般会默认使用NetworkManager来辅助管理网络配置.对于配置Linux服务器来说,我们不需要NetworkManager来配置网络,所以要关闭它,不然它会影响手动配 ...

  5. POSIX 使用互斥量和条件变量实现生产者/消费者问题

    boost的mutex,condition_variable非常好用.但是在Linux上,boost实际上做的是对pthread_mutex_t 和pthread_cond_t的一系列的封装.因此通过 ...

  6. 捡回reset的未提交修改

    使用 Reflog 如果一開始沒有記下來 Commit 的 SHA-1 值也沒關係,Git 裡有個 reflog 指令有保留一些紀錄.再次借用上個章節的例子,但這次我改用 --hard 模式來進行 r ...

  7. Oracle恢复流程图

    本图来自于网络,想当初小麦苗刚开始接触备份恢复的时候,就是靠着这张图来学习的,今天把这张图分享给大家,共勉. ............................................. ...

  8. Centos7安装DockerCE

    1. 说明 以下使用的系统为centos7,64位,镜像为CentOS-7-x86_64-Minimal-1804,所有操作以root用户操作 2. 安装Docker官方源 2.1 安装yum工具集 ...

  9. ovirt平台新建kvm操作

    登录后点击管理门户,随后计算-->虚拟机--> 新建 一般情况下需要操作的选项如下: 普通: 操作系统:linux 优化目标:服务器 描述:自定义 nic1:选择默认的网络 系统: 内存, ...

  10. 个人第五次作业-alpha2测试

    课程属于课程 课程链接 作业要求 作业要求链接 团队名称 你的代码我的发 https://www.cnblogs.com/skrchou/p/11885706.html 测试人名称 颜依婷 测试人学号 ...