精通D3.js学习笔记（1）基础的函数

【精通D3.js学习笔记（1）基础的函数】的更多相关文章

精通D3.js学习笔记（1）基础的函数

买了本吕大师的d3可视化.最近来学习一下,做个笔记. 1.选择元素 select(第一元素) 和selectAll(全部的元素) 类似css的选择器.也可以是dom选中的. var impotant = document.getElementById("important"); d3.select(important); getElementById 使用select getElementsByClassName 使用selectAll 2.选择集…

精通D3.js学习笔记（2）比例尺和坐标

1.线性比例尺 d3.scale.linear() 创建一个线性比例尺 .domain([0,500]) 定义域 .range([0,1000]) 值域 linear(x) 输入定义域返回值域 linear.invert(y) 输入值域,返回定义域 linear.domain([numbers]) 设定或获取定义域 linear.range([values])设定或获取值域 linear.rangeRound([valuses]) 四舍五入,结果…

D3.js学习笔记（六）——SVG基础图形和D3.js

目标在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的圆 circle 可以使用如下代码创建: <svg width="50" height="50"> <circle cx="25" cy="25" r="25" fill="purple&quo…

d3.js学习笔记（五）——将数据结构化为D3.js可处理的

目标在这一章,你将会理解如何对数据进行结构化,来更好的使用D3.js. 我们将会回顾我们之前已经学习的,学习D3.js如何使用选集(selections),JavaScript对象基础,以及如何最优的结构化数据. 到目前我们已经学到了哪些? 到目前,我们使用D3.js完成的例子都包含一个定义在最上方的数据集: var spaceCircles = [30,70,110]; 这个spaceCircles变量是一个JavaScript数组.数组就是一个变量的枚举列表.这也就意味着,每一个元素都附有…

D3.js学习笔记（四）—— 使用SVG坐标空间

目标在这一章,你将要使用D3.js基于一些数据把SVG元素添加到你想要的坐标位置上. 我们的目标就是使用下面的数据集: var spaceCircles = [30,70,110]; 并使用D3.js来对这些数据进行可视化: 数学/图形坐标空间(Mathematical/Graph Coordinate Space) 在我们使用D3.js基于一些数据把SVG元素添加到指定的坐标位置之前,我们先来讨论下坐标空间. 我们了解一些基础数学中的基础数学图形(mathematical graphs).…

D3.js学习笔记（一）——DOM上的数据绑定

开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文,来和大家分享 .当然,更推荐看英文原文教程了,点击这里. 简单例子在这个例子中,你将会使用D3.js来把数据绑定到简单网页的DOM元素(DOM element)上. 现在开始了!下面是一个简单的HTML网页: <!DOCTYPE html> <html> <head>…

D3.js学习笔记（三）——创建基于数据的SVG元素

目标在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始,然后去一步步理解它,从这一章开始,我们将会从零开始构建我们的数据可视化. 我们的目标是使用这个数据集: var circleRadii = [40,20,10]; 然后用D3.js来将这个数据集进行数据可视化. SVG的Circle元素首先我们要知道的是SVG的Circle元素是什么?它是怎么定义…

D3.js学习笔记（二）——使用绑定在DOM上的数据

简单例子在这个例子中,你将会使用D3.js来将数据绑定到DOM元素上.然后再使用D3.js利用绑定到DOM元素上的数据来更新网页. 在上一章中,我们以下面这个页面作为开始的: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="d3.v3.min.js"></script> </head> <body>…

JS学习笔记1_基础与常识

1.六种数据类型 5种基础的:Undefined,Null,Boolean,Number,String(其中Undefined派生自Null) 1种复杂的:Object(本质是一组无序键值对) 2.字符串转数字 Number(str):先求值再转换(先valueOf再toString都不行就是NaN),一般与我们的预期结果不一样,比如Number(”)=Number(false)=Number(null)=0而var x;Number(x)=NaN...所以一般都用下面两种方式 parseInt…

Vue.js学习笔记--1.基础HTML和JS属性的使用

整理自官网教程 -- https://cn.vuejs.org/ 1. 在HTML文件底部引入Vue <script src="https://cdn.jsdelivr.net/npm/vue"></script> 2. 基础HTML标签和属性 <div id="app">   <…