d3.scaleOrdinal()映射到颜色

2024-08-23

D3比例尺

D3中有个重要的概念就是比例尺.比例尺就是把一组输入域映射到输出域的函数.映射就是两个数据集之间元素相互对应的关系.比如输入是1,输出是100,输入是5,输出是10000,那么这其中的映射关系就是你所定义的比例尺. D3中有各种比例尺函数,有连续性的,有非连续性的,本文对于常用比例尺进行一一介绍. 1. d3.scaleLinear() 线性比例尺使用d3.scaleLinear()创造一个线性比例尺,而domain()是输入域,range()是输出域,相当于将domain中的数据集映射到ra

【 D3.js 高级系列 — 6.0 】值域和颜色

在[入门 - 第 10 章]作了一张中国地图,其中各省份的颜色值都是随意赋值的.如果要将一些值反映在地图上,可以利用颜色的变化来表示值的变化. 1. 思路例如,有值域的范围为: [10, 500] 现希望10用浅绿表示,500用深绿表示,10到500之间的值用浅绿和深绿之间的颜色表示.显然,此处需要一个函数,传入的参数是10到500之间的值,返回值是浅绿到深绿之间的颜色值. [高级 - 第 5.1 章]介绍的颜色插值函数正好可以派上用场. var palegreen = d3.rgb(66,2

【 D3.js 高级系列 — 5.0 】颜色

颜色是作图不可少的概念,常用的标准有 RGB 和 HSL,D3 提供了创建颜色对象的方法,能够相互转换和插值. RGB色彩模式是通过对红(Red).绿(Green).蓝(Blue)三个颜色通道相互叠加来得到各式各样的颜色.三个通道的值的范围都为0~255,因此总共能表示16777216(256 * 256 * 256)种,即一千六百多万种.几乎包括了人类所能识别的所有颜色,是最广泛也是最容易理解的颜色系统之一. HSL色彩模式是通过对色相(Hue).饱和度(Saturation).明度(Ligh

applyColorMap 在OpenCV中对灰度图进行颜色映射，实现数据的色彩化

什么是色彩映射: 说直白点就是将各种数据映射成颜色信息,例如:温度,高度,压力,密度,湿度,城市拥堵数据等等色彩化后更加直观表达在OpenCV里可以使用 Mat im_gray = imread("pluto.jpg", IMREAD_GRAYSCALE); Mat im_color; applyColorMap(im_gray, im_color, COLORMAP_JET); 这种方式将一个灰度数据安装一定得映射方式对应上一个颜色值,灰度图里存储你的温度数据,高度数据什么的都可

D3.js 入门学习(一)

一.安装D3.js 1.网络连接 <script src="https://d3js.org/d3.v4.min.js"></script> 2.命令行安装 cnpm || npm install d3 --save => 我采用的是cnpm install d3 --save 3.创建node 服务器 a. cnpm || npm install express --save =>前面教程已经说了express 搭建服务器了.后面

D3 JS study notes

如何使用d3来解析自定义格式的数据源? var psv = d3.dsvFormat("|"); // This parser can parse pipe-delimited text: var output = psv.parse("first|last\nabe|lincoln") console.log(output[0]) // 将输出以下内容: => {first: "abe", last: "lincoln"

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

线性比例尺线性比例尺是常用比例尺常用方法有: var linear = d3.scaleLinear() - 创建一个定量的线性比例尺. linear.domain([numbers]) - 定义或获取定义域 linear.range([values]) - 定义或获取值域 linear(x) - 输入一个定义域内的值,返回一个值域的值 linear.invert(y) - 输入一个值域的值,返回一个定义域的值 linear.rangeRound([values]) - 代替range(),

D3.js 力导向图

花了大半天看了一个八十几行的代码..心累力导向图是之前就有画过很多次的东西,但是这次的代码看上去很陌生,然后发现是D3更新了4.0.... 先贴代码 var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); var color = d3.scaleOrdinal(d3.schemeCategory20); var simulatio

D3.js 入门学习(二) V4的改动

//d3.scan /* 新的d3.scan方法对数组进行线性扫描,并根据指定的比较函数返回至少一个元素的索引. 这个方法有点类似于d3.min和d3.max. 而d3.scan可以得到极值的索引而不仅仅是计算极值. */ var a1 = [1,3,5,2,9]; var i = d3.scan(a1,function(a,b){ return b-a; // 返回最大值的索引, a-b; 返回最小值的索引 }); console.log(i); //4; //d3.ticks d3.tick

d3.js V5版本在vue里使用自定义节点图片

var width = this.$refs.topInfo.offsetWidth; var height = this.$refs.topInfo.offsetHeight; var img_w = 77; var img_h = 80; var radius = 30; //console.log(width,height) var svg = d3.select("#forceDirected") .append("svg") .attr("wid

d3.js 入门指南

说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需求,那就太难了.这个时候,聪明的小伙伴会转而学习一些基础的,定制化程度更高的框架,而其中最杰出的就是D3.js,由于我是专为北京地铁定制化软件,经常会用到数据可视化,废话不多说先上北京地铁路网,因为今天是入门教程,但是我不想讲svg基础知识,只讲一点基础内容饼图,大佬请绕行. 1.绘制饼图的预备知识

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

D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这里作者本人也只是粗略的讲解每个新知识点的意思!如果不是很理解的话,需要读者自行查看官网API 为了绘制一个饼状图,我们还是需要以下新的知识点 d3.arc( {} ),弧形生成器,用以绘制弧形,需要传入一些用以绘制弧形基本的数据的对象,例如,该对象的属性可以包括(我用官网api的示例) d3.pie

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

D3.js的v5版本入门教程(第七章) 比例尺在D3.js中是一个很重要的东西,我们可以这样理解d3.js中的比例尺——一种映射关系,从domain映射到range域(为什么会是domain和range呢?等一下你就会看到,因为我们在建立比例尺是常常会用到domain()和range()两个函数,当然不是绝对的,D3中有很多类型的比例尺) 下面介绍在本套教程中常用的两种比例尺线性比例尺序数比例尺线性比例尺 domain域和range域都可以连续变化 <body> <sc

D3.js力导向图中新增节点及新增关系连线示例

大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://d3js.org/d3.v4.min.js&qu

D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决

上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后添加的Group2及Group2内的其他元素会遮盖先添加的Group1及Group1中的其他元素. 举个栗子别人都在过520,我在这里玩栗子 =.=: 向SVG中添加了一个Group1,又添加了一个Group2: 先向Group2中添加一个节点Group2_Node,在向Group1中添加一个节点

初识 D3.js ：打造专属可视化

一.前言随着现在自定义可视化的需求日益增长,Highcharts.echarts等高度封装的可视化框架已经无法满足用户各种强定制性的可视化需求了,这个时候D3的无限定制的能力就脱颖而出. 如果想要通过D3完成可视化,除了对于D3本身API的学习, 关于web标准的HTML, SVG, CSS, Javascript 和数据可视化的概念以及标准都是需要学习的.这无疑带来了较高的学习门槛,但这也是值得的,因为掌握 D3 后,我们几乎可以实现任何 2d 的可视化需求. 本文通过对D3核心模块分析以

【 D3.js 入门系列 --- 6 】如何让图表动起来

[5.1]节中制作了一个比较完善的图表,但它是静态的,想做出它的动态效果吗?在D3中只需要短短的几行代码即可. 这一节将涉及4个函数的使用. 1.transition() 启动转变效果只需要添加这个即可.把它加到两种状态之间,例如: .attr("fill","red") .transition() .attr("fill","steelblue") 如上代码,上下两种属性 fill 的颜色不同,中间添加一行 .transit

使用D3 Geo模块画澳大利亚地图

数据数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息.因此做数据可视化前需要想明白2件事: 你有什么数据? 你要传达什么信息? 本文中的示例中,将以不同的颜色显示澳大利亚不同地区的客户数量. 因此,首先需要澳大利亚的地图数据,D3中的Geo模块可以处理GeoJSON格式的地理数据.(GeoJSON是一种对各种地理数据结构进行编码的格式.GeoJSON对象可以表示几何.特征或者特征集合.GeoJSON支持下面几何类型:点.线.面.多点.多线.多面和几何集合.GeoJSON里的特征包含

d3.js画折线图

下载d3.zip,并解压到网页文件所在的文件夹 windows下,在命令行进入网页文件夹,输入 python -m http.server 在浏览器中输入127.0.0.1:8000/xxx.html 示例如下,html文件和data存在同一个目录下 https://bl.ocks.org/mbostock/3884955 <!DOCTYPE html> <meta charset="utf-8"> <style> path { stroke-wid

d3.js在vue项目中的安装及案例

1. 安装: npm i d3 --save 2. 引入:main.js import * as d3 from "d3"; Vue.prototype.$d3 = d3; window.d3 = d3; //暂时设置为全局变量 3. demo代码: demo源码参考地址 <template> <div style="width: 100%;height: 100%;"> <svg version="1.1" xm

d3.scaleOrdinal()映射到颜色

热门专题