![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
d3.js
Harry_Burt
这个作者很懒,什么都没留下…
展开
-
【D3.V3.js数据可视化系列教程】--(十二)坐标尺度
1、多种类型的缩放尺度Quantitative ScalesLinear ScalesIdentity ScalesPower Scales可以参考https://github.com/mbostock/d3/wiki/Quantitative-Scales我们一般采用线性缩放2、定义域和值域定义域范围domain([100, 500])值域范围.range([转载 2014-02-20 17:08:58 · 1049 阅读 · 0 评论 -
【D3.V3.js数据可视化系列教程】--(八)绘制SVG
【D3.V3.js系列教程】--(八)绘制SVG1、创建SVG[html] view plaincopyprint?//Width and height var w = 500; var h = 50; var svg = d3.select("body") .append("svg") .attr("w转载 2014-02-20 17:05:18 · 1402 阅读 · 0 评论 -
【D3.V3.js数据可视化系列教程】--(九)D3的数据类型
【D3.V3.js系列教程】--(九)D3的数据类型1、变量JAVASCRIPT的变量是一种类型宽松的语言。定义变量不用指定数据类型。而且还是动态可变的。var value = 100;value = 99.9999;value = false;value = "This can't possibly work.";value = "Argh, it does转载 2014-02-20 17:06:09 · 1612 阅读 · 0 评论 -
【D3.V3.js数据可视化系列教程】--(三)数据绑定
【D3.V3.js系列教程】--(三)数据绑定1、D3可以处理哪些类型的数据它会接受几乎任何数字数组,字符串,或对象(本身包含其他数组或键/值对)。它可以处理JSON和GeoJSON甚至有一个内置的方法来帮助你CSV文件中加载数据。2、我们要做两件事:数据准备;元素选择。 [html] view plaincopyprint?>转载 2014-02-20 17:01:36 · 972 阅读 · 0 评论 -
【D3.V3.js数据可视化系列教程】--(二)最简单的开始:添加元素
【D3.V3.js系列教程】--(一)最简单的开始:添加元素 1、添加元素语法:d3.select("body").append("p").text("New paragraph!");2、怎么做?将D3.V3.js解压到桌面,同时在桌面创建一个index.html[html] view plaincopyprint?html> HEAD>转载 2014-02-20 16:58:52 · 1231 阅读 · 0 评论 -
【D3.V3.js数据可视化系列教程】--(七)SVG概要
【D3.V3.js系列教程】--(七)SVG概要一、简单形状 有一些视觉元素可以包含那些SVG标签,包括矩形,圆形,椭圆形,线条,文字和路径之间。基于像素的坐标系统,其中0,0是左上角的绘图空间。增加x值向右移动,同时增加Ÿ值向下移动。正确绘制一个矩形。使用x和y的指定左上角的坐标,宽度和高度指定的尺寸。我们SVG的矩形填充整个空间:圈画出一个圆。使用cx和c转载 2014-02-20 17:04:38 · 1358 阅读 · 0 评论 -
【D3.V3.js数据可视化系列教程】--(十)更自由的条形图
1、添加一个矩形//Width and height var w = 500; var h = 100; var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]转载 2014-02-20 17:07:41 · 1022 阅读 · 0 评论 -
【D3.V3.js数据可视化系列教程】--(十一)散点图
1、一般的散点绘制用二维数组表示每个点的坐标//Width and height var w = 500; var h = 100; var dataset = [ [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [4转载 2014-02-20 17:08:19 · 1190 阅读 · 0 评论 -
【D3.V3.js数据可视化系列教程】--(五)用层画条形图
【D3.V3.js系列教程】--(五)用层画条形图1、为同类层添加样式div.bar { display: inline-block; width: 20px; height: 75px; /* We'll override this later */ background-color: teal;}2、声明要为某类层设置属性.attr("cl转载 2014-02-20 17:03:30 · 992 阅读 · 0 评论 -
【D3.V3.js数据可视化系列教程】--(一)简介
【D3.V3.js系列教程】--(一)简介一、D3是什么?D3.js是一种数据操作类型的javascript库(也可视其为插件);二、D3有何特点?结合HTML,SVG和CSS,D3可以图形化的,生动的展现数据。三、如何获得D3?D3.V3.js四、一些基础知识:1、HTML超文本标记语言,用来构建网页。2、CSS样式层叠表,用来设置HTML页面的视转载 2014-02-20 16:54:28 · 1297 阅读 · 0 评论