【 D3.js 入门系列 --- 4 】 如何使用scale(比例)

本文介绍了D3.js中scale的概念及其使用方法,包括如何利用scale处理数据映射问题,特别是线性scale的配置和调整技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    本人的个人博客为: www.ourd3js.com 

    csdn博客为: blog.youkuaiyun.com/lzhlzz 

    转载请注明出处,谢谢。


    在上一节中使用了一个很重要的概念 — scale (这个不知道翻译成什么,暂且叫它比例)。本节将重点介绍它的相关使用方法。

    在介绍 scale 之前,先介绍两个经常和 scale 一起出现的函数,在上一节中也出现了。

  • d3.max()
  • d3.min()
    它们用于求一个数组中的最大值和最小值,如果是一维数组,使用方法如下:
		var dataset = [ 30, 20 , 52 , 2 , 11 ];
		var result = d3.max( dataset );
    变量 result 中保存的是数组 dataset 的最大值 52。这是一维数组的用法,二维数组的用法如下:
var dataset = [ [ 30 , 20 ] , 
		        [ 52 , 2 ] ,
                [ 90 , 11 ] ];
var result = d3.max( dataset , function(d){ 
				  return d[0]; } );
    如此,返回的值为90, 因为比较的是30,52,90这三个数,最后一行的 d[0] 就是指定每一个数组的第一个值。

   
    接下来介绍 scale (比例)的用法,首先要明确一点: scale 是 函数,不错,是 函数
    为什么要使用 scale 呢?假设现在要为一个汽车公司做数据可视化,要将它每月的汽车销量用柱形图表示,假设这个月又100销量,你用100个像素长度的柱子来表示销量。下个月500销量,你用500个像素,再下个月又3000台呢?恐怕你不可能用3000个像素吧。这时候就要用到 scale (比例)了。
    scale 是用于给定一个 domain (定义域),给定一个 range (值域) ,能够自动进行数值之间的转换。
    最常用的 scale 是线性函数。它的用法如下:
		var scale = d3.scale.linear();
		scale.domain([0,20])
		     .range([0,100]);				 
		var result = scale(10);
    通过 d3.scale.linear() 指定要使用线性函数的 scale 。下两行指定 scale 的 domain 和 range ,这里分别为 [ 0 , 20 ] 和 [ 0 , 100 ],如果不指定,它们默认都为 [ 0 , 1 ] 。接下来调用 scale 函数,传了一个参数10给它,返回值保存在 result 中。 result 的值为多少呢, 是 50 。它是根据线性函数计算的。 一定要记住, scale 是一个函数
    
    domain 和 range 最少放入两个数,可以超过两个数,但两者的数量必须相等,如下为放入3个数的情况:
		var scale = d3.scale.linear();
		scale.domain([0,20,40])
		     .range([0,100,150]);				 
		var result = scale(30);
    这就是说有两个线性函数,当输入的值为30时,属于 domain (定义域)的20-40这个范围,那么输出为100-150这个范围。这里的30对应的值为125,所以 result 的值为125。

    d3.scale.linear() 中还有一些方法,这里介绍两个:
  • nice()  ,改变函数的 domain ,能自动把 0.00000000000001 变为最接近它的 0 , 9.999999991 变为最接近它的 10 
  • rangeRound() , 能自动把输出变为最接近它的整数。
    调用的时候形如:
		scale.domain([0.000000001,9.99999999991])
		     .range([0,100])
			 .nice();
    
    上面介绍的是最常用的线性函数的 scale ,其他还有 sqrt ,pow,log,quantize,ordinal 等等各种 scale。 需要用的时候可到 d3js.org 查询API。



<think>好的,我现在需要帮助用户了解D3.js和p5.js的编程可视化技术,包括教程和示例。首先,我得回忆这两个库的特点和用途,确保信息准确。 D3.js主要用于数据驱动的文档操作,适合复杂的数据可视化,比如图表和地图。而p5.js更偏向创意编程,适合图形、动画和交互艺术。用户可能想知道两者的区别和应用场景,所以需要分点说明。 接下来,用户需要教程和示例。我应该先列出各自的基础教程步骤,比如环境搭建、基本语法、核心概念等。例如,D3.js的数据绑定和DOM操作,p5.js的绘图函数和事件处理。然后,给出简单示例,帮助用户快速上手。 还要注意引用提供的资料。比如,引用[1]提到p5.js的可访问性和两种编码方式,引用[4]提到D3的数据处理和Promise的使用。这些需要自然地融入到回答中,并在末尾添加引用标识。 用户可能需要知道如何开始学习,所以教程部分要结构清晰,分步骤讲解。同时,示例代码要符合格式要求,使用正确的LaTeX行内公式,比如变量用$...$。但检查示例后发现没有数学表达式,可能不需要添加,但需确保代码块正确。 最后,生成相关问题要考虑用户可能的后续疑问,比如两者的对比、性能优化、应用案例等。需要确保问题相关且有引导性。 现在需要整合所有信息,确保符合系统指令:使用中文,结构清晰,引用正确,代码格式正确。还要检查是否有遗漏点,比如D3的数据测量部分和p5的交互功能,根据引用补充细节。同时,避免技术错误,比如D3的Enter-Update-Exit模式是否正确描述。 完成回答后,添加相关问题,帮助用户深入探索。整个过程要保持自然,信息准确,符合用户需求。</think># D3.js与p5.js可视化编程技术指南 ## 一、D3.js核心技术与教程 ### 1. 基础特性 - **数据驱动**:通过数据绑定实现动态DOM操作,支持SVG/Canvas渲染[^4] - **链式语法**:如`d3.select("body").append("circle").attr("r", 5)` - **数据处理**:内置数组统计方法(`d3.min/max/mean`等) ### 2. 入门教程 1. **环境搭建**: ```html <script src="https://d3js.org/d3.v7.min.js"></script> <!-- 引用压缩版本[^3] --> ``` 2. **数据加载**: ```javascript d3.csv("data.csv").then(data => { // 使用Promise处理异步加载 console.log(data); }); ``` 3. **基础可视化示例(柱状图)**: ```javascript const svg = d3.select("#chart").append("svg"); svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", (d,i) => i*30) .attr("height", d => d*5); ``` ### 3. 进阶技巧 - **力导向图布局**:`d3.forceSimulation` - **过渡动画**:`transition().duration(1000)` - **地理投影**:`d3.geoPath`配合GeoJSON数据 ## 二、p5.js核心技术与教程 ### 1. 基础特性 - **创意编程范式**:基于Processing的绘图模式[^1] - **交互响应**:内置`mousePressed()`/`keyPressed()`事件 - **多媒体支持**:WebGL/音视频/摄像头整合 ### 2. 入门教程 1. **开发环境**: ```html <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script> <!--使用网页编辑器 --> ``` 2. **基础绘图示例**: ```javascript function setup() { createCanvas(400, 400); } function draw() { background(220); ellipse(mouseX, mouseY, 50, 50); } ``` 3. **交互实现**: ```javascript let rotation = 0; function mouseDragged() { rotation += 0.1; rotate(rotation); rect(50, 50, 50, 50); } ``` ### 3. 进阶应用 - **粒子系统**:对象数组管理动态元素 - **着色器编程**:`loadShader()`实现GPU加速 - **数据可视化**:结合`chart.js`等库扩展 ## 三、技术对比与应用场景 | 特性 | D3.js | p5.js | |-----------|---------------------------|------------------------| | **核心定位** | 数据关系可视化 | 创意交互可视化 | | **学习曲线** | 陡峭(需DOM/CSS/SVG知识) | 平缓(类似Processing) | | **典型应用** | 企业级仪表盘、复杂图表 | 数字艺术、教育演示 | | **性能优化** | 虚拟DOM、WebGL扩展 | OffscreenCanvas多线程 | ## 四、集成应用示例 ```javascript // D3数据处理 + p5渲染 d3.json("data.json").then(data => { const values = data.map(d => d.value); const scale = d3.scaleLinear().domain(d3.extent(values)).range([0,255]); function draw() { background(scale(data[frameCount%data.length])); } }); ```
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值