d3.js d3.scale.ordinal() --详解 rangeBands

最新推荐文章于 2024-04-13 18:18:18 发布
最新推荐文章于 2024-04-13 18:18:18 发布
阅读量7k 收藏 1
点赞数 1
分类专栏： D3 技巧 文章标签： d3 api
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lh_qppr/article/details/72631508
版权

d3.scale.ordinal() –详解 rangeBands

@(d3_v3)[scale, ordinal, 参数说明]

取自API文档的解释图

Alt text
可以看出range内包括Step单元N个（取决于domain数组个数）、OuterPading单元两个
ordinal.rangeBands(interval[, padding[, outerPadding]])
为了区分参数和各单元。参数由首字母替代；
简单的换算一下

//range与rangeBand 、padding和outerPadding的关系式： 
range = N* rangeBand + (N-1)*padding + 2 * outerPadding;      
//==>
range =
最低0.47元/天 解锁文章
lh_qppr
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
D3.js V4 : scale - scaleOrdinal
lh_qppr的博客
02-27 9192
v4 的优点在于API划分更细致； scaleOrdinal scaleBand scalePoint schemeCategory10 | 20 | 20b |20c
D3 scaleOrdinal
Claroja
06-22 1620
Ordinal Scale(序数比例尺)的定义域和值域都是离散的. var ordinal = d3.scaleOrdinal() .domain([1,2,3]) .range([10,20,30]) console.log(ordinal(1))//10 d3.scaleOrdinal - create an ordinal scale. ordinal - compute the range value corresponding to a given domain value.
[D3] 4. d3.max
weixin_33892359的博客
06-03 125
how to use d3.max to normalize your dataset visually within the specific bounds of a variable domain.   <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"&gt...
可视化工具–D3–比例尺的使用（ordinal）
可视化大猩猩
06-06 4377
序数比例尺的使用
D3 数据可视化004——有序尺度 scaleOrdinal
最新发布
qq_36433608的博客
04-13 927
D3.js scaleOrdinal 有序尺度的使用和解释
D3.js实现柱状图的方法详解
11-26
D3.js提供了多种比例尺类型，例如线性比例尺(linear scale)和序数比例尺(ordinal scale)。在柱状图中，x轴通常表示分类数据，因此适合使用序数比例尺；而y轴通常表示数值数据，应使用线性比例尺： ```javascript ...
d3-in-all-its-glory-en:有关D3.js的博客文章的演示。 看文章-
05-09
在D3.js中，数据通常通过`d3.csv`、`d3.json`等方法加载，然后通过`d3.scale.linear`、`d3.scale.ordinal`等函数进行数据映射，最后通过选择器（如`d3.select`和`d3.selectAll`）操作DOM元素，将数据呈现出来。...
ordinal-layers.github.io
03-06
"ordinal-layers.github.io" 是一个基于GitHub托管的项目，主要关注的是JavaScript技术。这个项目的网页可能是一个关于数据处理、可视化或前端开发的资源库，其中"ordinal-layers"可能是项目的核心概念，可能是一个...
JAVA-Degree-ordinal.rar_Java degree
09-21
本资源“JAVA-Degree-ordinal.rar_Java degree”包含9个与Java相关的代码片段，这些代码主要关注文件操作，包括缓冲、查看以及读写功能。下面将对这些知识点进行详细的解释和探讨。 1. **文件缓冲**： 在Java中，...
利用D3.js实现最简单的柱状图示例代码
11-29
D3.js（Data-Driven Documents）是一个强大的JavaScript库，专门用于数据可视化。它允许开发者直接操作DOM（文档对象模型）来创建复杂的数据图表。相比于像ECharts这样的封装库，D3.js提供了更底层的控制，可以灵活...
d3-scale-chromatic:顺序，发散和分类色标
04-29
d3比例色 此模块提供了顺序的，发散的和分类的配色方案，这些配色方案设计用于的和 。 这些方案大多数都来自Cynthia A. Brewer的 。 由于ColorBrewer仅发布离散的配色方案，因此使用插值顺序和发散的比例尺。 例如，要使用“配色方案创建分类色标： var accent = d3 . scaleOrdinal ( d3 . schemeAccent ) ; 要使用“配色方案创建连续的离散九色刻度，请执行以下操作： var blues = d3 . scaleOrdinal ( d3 . schemeBlues [ 9 ] ) ; 要使用配色方案创建发散的连续色标，请执行： var piyg = d3 . scaleSequential ( d3 . interpolatePiYG ) ; 正在安装 如果您使用NPM，则npm install d3-scale-
D3:Ordinal Scales & Band Scales
appleclub666的博客
10-13 451
日期：2020-10-12 作者：18届 WRZ 标签：数据可视化 一.序数比例尺Ordinal Scales 序数比例尺的输入域和输出域都是离散的。它可以将输入域的值按照数据集中数据的顺序分别映射到输出域中。首先我们来定义一个序数比例尺 var scale=d3.scale.Ordiinal() .domain(d3.range(3)) .range(["a","b","c"]); console.log(scale(0));
【d3 基础教程】尺度--Scale
qq_41700374的博客
12-01 624
1. 简介 作为数据可视化开发者，我们总是在反复做一个非常关键的事情：将数值从数据领域映射到图形领域。例如：将最近一次453美元的采购映射为一个653像素的长条；又如，将昨晚23.59美元的酒吧账单映射为一个34像素的长条。从某种程度上讲，这就是数据可视化的全部内容-将数据高效、准确地映射为图形。 什么是尺度？ 对于函数f，集合A是它的定义域，集合B是它的值域。试想，如果A代表数据域，B代表...
可视化工具D3.js教程 入门 （第六章）—— 比例尺的使用
weixin_44867717的博客
09-22 398
可视化工具D3.js教程 入门 （第六章）—— 比例尺的使用 1、比例尺是什么？ 比例尺能将“一个区间”的数据映射到“另一个区间”。 例如[0, 1]对应到[0, 300]，当输入0.5时，输出150。或者将[0, 1, 2]对应到[“red”, “green”, “blue”]，当输入2时，输出blue。 上述示例中的[0, 1]和[0, 1, 2]称为定义域，[0, 300]和[“red”, “green”, “blue”]称为值域。定义域和值域之间的映射方法称为对应法则。 要理解比例尺，就先需要理解定
初学d3
风烟
10-07 1178
最近再做一个应用，然后需要做一些表格，其中有柱状图和饼状图，柱状图感觉还可以用div模拟，然是饼状图就不知道了，想了半天，css我是实现不了了。 我想起来，现在前端可视化有好多的库，我刚好可以趁这个机会学习一下，然后上网一搜，频率出现的比较多的就是d3了，想来，数据可视化的东西库应该是一类东西，学习其中一个比较经典的，其他的以后就算要用，应该思想是差不多的，就和当初学jquery一样，jquery
d3 scale详解
hsany330的专栏
06-02 1247
domain是定义域，就是坐标系下的值 range是值域，就是映射到svg画布上的值 1.d3.scaleLinear() 线性比例尺 domain：连续型 range：连续型 1 线性比例尺超出定义域的部分会按映射拓展 2.d3.scaleBand() 序数比例尺 domain: 离散型 range:连续型 可以理解为用domain将range平均分割 scale_b= d3.scaleBand().domain([1,2,3,4]).range([0,100]) 1 3.d3.scaleOrdina
d3js scales深入理解
weixin_34259232的博客
07-15 300
比例尺函数是这样的javascript函数： 接收通常是数字，日期，类别等data输入并且： 返回一个代表可视化元素的值，比如坐标，颜色，长度或者半径等 比例尺通常用于变换(或者说映射）抽象的数据值到可视量化变量（比如位置，长度，颜色等） 比如，假设我们有以下数组数据： [ 0, 2, 3, 5, 7.5, 9, 10 ] 我们可以这样创建一个比例尺函数： v...
D3.js 几种常用的坐标轴
cxu123321的博客
06-03 963
D3.js 几种常用的坐标轴 D3.js 学习随便，记录几种常用的坐标轴。 D3.js 比例尺，把一组输入域映射到输出域的函数，我们可以用比例尺来创建坐标轴。 .domain():设置输入域，.range()设置输出域；下面以基础的线性比例尺为例解释说明一下。 d3.scaleLinear 线性比例尺 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>&lt
D3入门系列(2)--简单的条形图、折线图、散点图和文本换行
ban2413的博客
12-22 494
SVG画布 HTML 5 提供两种强有力的“画布”：SVG和Canvas。 SVG的特点： SVG 绘制的是矢量图，因此对图像进行放大不会失真 基于 XML，可以为每个元素添加 JavaScript 事件处理器 每个图形均视为对象，更改对象的属性，图形也会改变 不适合游戏应用 Canvas特点： 绘制的是位图，图像放大后会失真 不支持事件处理器 能够以...
d3.scale .ordinal()
06-07
d3.scale.ordinal() 是 D3.js 中的一个比例尺函数，用于将离散的输入域映射到离散的输出域。它通常用于处理枚举型或者文本型的数据，并将其映射到有限的离散值。 使用 d3.scale.ordinal() 函数，你可以创建一个比例...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值