d3 & hexagon

d3 & hexagon https://bl.ocks.org/mbostock/5249328 https://bl.ocks.org/vasturiano/e70e14483fe01eb0a3ea7d1d46a30571 https://jsoma.github.io/hexagon-grids-for-adobe-illustrator/…

需求驱动实现前文讲过了D3的数据驱动机制,中间所举的例子都很简单.例如那个demo里面,绑定的数据是一个简单的数组,实现的图元也仅仅是一堆用SVG画的circle.但是现实世界中我们往往会遇到复杂的需求,例如我就遇到了这样一个需求:数据是一个复杂的对象数组,而与之绑定的图元是一个可变图形.该图形可以根据与他绑定的数据中的具体参数,在圆形.方块.三角之间切换,并且要求过渡自然. 面对这个需求,最直接的做法是把圆形.方块.三角用SVG的<circle>圆形标签,<rect>矩形标签以…

d3.js制作蜂巢图表带动画效果

以上是效果图,本图表使用d3.js v4制作.图表主要功能是在六边形格子中显示数据,点击底部图标可以切换指定格子高亮显示,图表可以随浏览器任意缩放. 1.图表的主体结构是由正六边形组成,使用d3生成六边形可以使用d3-hexbin.js,生成六边形比较方便,只要给定中心点坐标和半径即可生成六边形路径,例如: var r = 10; // 六边形半径 var pos = [[5,5],[10,10]]; // 六边形中心点坐标数组 var hexbin = d3.hexbin() // 使用hex…

D3.js学习（七）

上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来的基础上添加两个东西. 添加一个按钮 <div id="option"> <input name="updateButton" type="button" value="Update" onclick="…

D3.js学习（六）

上节我们学习了如何绘制多条曲线, 以及给不同的曲线指定不同的坐标系.在这节当中,我们会对坐标轴标签相关的处理进行学习.首先,我们来想一个问题, 如何我们的x轴上的各个标签的距离比较近,但是标签名又比较长怎么办? 像是下面这种情况该如何处理? 上图中x轴上的标签是不是都重叠在一起了?非常恶心对不对?所以,我们得想个办法在不改变ticks标签直接的距离的情况下,让他们达到很好的阅读效果. 让ticks标签旋转一定的角度下面我们的目标就是实现这一种效果:为了达到这个目标我们首先得做一个准备工作: …

D3.js学习（五）

上一节我们已经学习了如何设置填充区域,其实理解了他的实现原理还是非常简单了.这一节中, 我们主要学习多条曲线的绘制,以及给不同的曲线指定不同的纵坐标. 新的数据由于我们要画两条曲线,所以我们要在原来的基础上新增一组测试数据,现在我们的数据是这样的: date close open 1-May-12 58.13 3.41 30-Apr-12 53.98 4.55 27-Apr-12 67.00 6.78 26-Apr-12 89.70 7.85 25-Apr-12 99.00 8.92 24-A…

D3.js学习（四）

上一节我们已经学习了线条样式和格栅的绘制,在这一节中我们将要根据之前绘制的线条对图表进行填充,首先来看一下我们的目标吧在这个图表中,我们对位于线条下面的空间进行了填充,那么,如何改做到呢? 设置填充样式这里设置我们填充区域的样式,我们使用浅蓝色进行填充: .area{ fill: lightsteelblue; stroke-width: 0; } 定义填充区域就像前面绘制线条之前一样,我们首先要对其进行定义 //定义填充区域 var area = d3.svg.area() .x(fun…

D3.js学习（三）

上一节中,我们已经画出了图表,并且给图表添加了坐标轴的标签和标题,在这一节中,我们将要学习几个绘制线条不同特性的几个函数,以及给图表添加格栅.ok,进入话题! 如何给线条设置绘制的样式? 这个其实非常简单,在我们之前定义的valueline基础上加一个.interpolate(“样式”)就行啦 //定义线条 var valueline = d3.svg.line() .interpolate("basis") .x(function(d){return x(d.date);}) .y(…

D3.js学习（一）

从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有错误的还希望同学们帮我指出来.当然了, 可以的话我希望大家都可以去看看英文资料(文章后面将列英文资源),毕竟那才是原汁原味的D3. 好了, 废话到此,下面我们开始我们的学习之旅吧! 什么是D3.js? 一句话:D3.js是一个操纵数据的javascript库! 从一个简单的例子开始学习一个新的东西…

svg + d3

为了实现元素的添加,删除,拖拽,左键点击,右键单击,悬浮等功能,使用了d3 + svg 的技术来实现界面. 最开始是采用canvas,但是由于功能原因放弃了该技术,可以看下 canvas简介另附:canvas和svg区别首先,下载d3.min.js和snap.svg-min.js 如果使用的是bower, 安装d3,bower --allow-root install -S d3 安装svg,bower --allow-root install -S snap.svg 然后页面再引入. 新建…

D3中selection之使用

1. 极为重要的reference: [1] How selections works. http://bost.ocks.org/mike/selection/ [2] Nested selections. http://bost.ocks.org/mike/nest/ 2. 相关概念笔记 (1)Selections are usually seen as arrays of DOM elements, but it is not very accurate. There are two ma…

D3中动画（transition函数）的使用

关于transition的几个基本点: 1. transition()是针对与每个DOM element的,每个DOM element的transition并不会影响其他DOM element的transition操作: 2. 对于每一个DOM element的transition每次只能执行一个,如果在一个DOM element上添加了许多transition操作,只有最后一个会起作用,前面的都会被覆盖掉.但是例外是,当这些transition是chaining的形式连接的时候,这些trans…

D3数据绑定

这里转载一个非常经典的关于D3数据绑定的帖子,由D3作者自己写的,非常棒,以至于我忍不住全文copy到此. 原文地址 Thinking with Joins Say you’re making a basic scatterplot using D3, and you need to create some SVG circle elements to visualize your data. You may be surprised to discover that D3 has no pri…

D3中数据与DOM element绑定之data() enter() exit()浅析

几个非常有用的links: [1] three little circles. http://bost.ocks.org/mike/circles/ [2] How selection works. http://bost.ocks.org/mike/selection/ [3] Thinking with join. http://bost.ocks.org/mike/join/ 具体而言,data()是用来将DOM element与数据进行绑定起来,其第二个参数可以用来specify当前的每…

d3 中exit() remove()正确工作的方式

在官网中给出的代码［1］是有问题的,如下的代码并不能正常工作: // Update… var p = d3.select("body").selectAll("p") .data([4, 8, 15, 16, 23, 42]) .text(String); // Enter… p.enter().append("p") .text(String); // Exit… p.exit().remove(); 结合参考文献［2］,正确的工作方式有两种:…

d3 document

https://github.com/d3/d3/wiki/API--%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C https://github.com/d3/d3/wiki/Gallery http://bl.ocks.org/mbostock/3883245 https://github.com/d3/d3/wiki…

D3.js学习记录

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h…

D3.js部署node环境开发

总结一段D3.js部署node环境的安装过程准备阶段: 首先电脑上要安装node环境,这个阶段过滤掉,如果node环境都不会装,那就别玩基于node环境搞的其他东西了. 搭建环境: 我在自己的F:系统盘创建一个工程目录d3Node,然后创建一个package.json文件,里面配置如图: 其中:dependencies字段描述了你的工程所用到的库运行时的依赖,他们可以使你的工程在浏览器中正常运行.在d3中只有一个依赖,d3是D3在npm库中发布的名字,其中版本号3.x标明该工程可以兼容任意大于…

d3.js读书笔记-2

比例尺比例尺基本内容比例尺是一组把输入域映射为输出范围的函数.任意数据集中的值不可能恰好与图表中的像素尺度一一对应.比例尺就是把这些数据值映射为可视化图形中使用的新值的便捷手段.D3的比例尺就是那些你定义的带有参数的函数.定义好之后,就可以调用这些比例尺函数,传入值,它们就能返回按比例生成的输出值. 比例尺的输入值域(input domain)指可能的输入值的范围. 比例尺的输出范围(output range)指输出值可能的范围,一般以用于显示的像素为单位. 其实比例尺就是归一化的概念.…

d3.js读书笔记-1

d3.js入门 d3入门 D3是一个强大的数据可视化工具,它是基于Javascript库的,用于创建数据可视化图形.在生成可视化图形的过程中,需要以下几步: 把数据加载到浏览器的内存空间: 把数据绑定到文档中(这里的文档指的是html文档)的元素,根据需要创建新元素: 解析每个元素范围内的数据并为其设置相应的可视化属性,实现元素的变换(transforming); 响应用户输入实现元素状态的过渡(transitioning); SVG D3最适合用来生成和操作SVG(Scalable Vecto…

Gerald's Hexagon

Gerald's Hexagon Gerald got a very curious hexagon for his birthday. The boy found out that all the angles of the hexagon are equal to . Then he measured the length of its sides, and found that each of them is equal to an integer number of centimeter…

D3的参考样例

官网进去就可以看到很多样例了.但是最喜欢的是mbostock的http://bl.ocks.org 然后其它的也有一些: 看上去很酷--http://www.visualcinnamon.com/portfolio 最简单易用--http://www.ourd3js.com/ 简单易用的小补充--http://blog.csdn.net/tianxuzhang/article/ 自己改代码不能少的官方手册--https://github.com/d3/d3/wiki/API--中文手册虽然不怎…

【 D3.js 进阶系列 — 6.1 】缩放的应用（Zoom）

缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.zoom() .scaleExtent([1, 10]) .on("zoom", zoomed); function zoomed() { circles_group.attr("transform", "translate(" + d3.event.…

【 D3.js 入门系列 --- 7 】理解 update, enter, exit 的使用

在前面几节中反复出现了如下代码: svg.selectAll("rect") .data(dataset) .enter() .append("rect") 当所选择的 rect 数量比绑定的数据 dataset 的数量少的时候,通常会用到以上代码,这一节就详细说说当被选择元素和数据数量不一致时该如何处理. 这一节将涉及到三个函数. 1. update() 当对应的元素正好满足时 ( 绑定数据数量 = 对应元素 ) 实际上并不存在这样一个函数,只是为了要与之后…

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

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

【 D3.js 入门系列 --- 5.1 】做一个带坐标轴和标签的图表

前面几节讲解了图标.坐标轴.比例等等,这一节整合这些内容做一个实用的图表.结果图如下: 代码如下所示: <html> <head> <meta charset="utf-8"> <title>Chart</title> </head> <style> .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdge…

D3树状图给指定特性的边特别显示颜色

D3作为前端图形显示的利器,功能之强,对底层技术细节要求相对比较多. 有一点,就是要理解其基本的数据和节点的匹配规则架构,即enter,update和exit原理,我前面的D3基础篇中有介绍过,不明白的可以再去研究下. 本篇博文,同样是在这个框架下,完成修改树状图中某两个节点之间的边用红色线条连接,实现表达特殊含义的目的. 背景故事: 微信朋友圈之间产品帖子相互转发,有些帖子转发后会有成交,只要有成交,则这个促成成交的节点及其之上的父节点都相应是有功劳的,这个轨迹需要用高亮的颜色表示(比如本例中…

D3的基本设计思路

学习一项新技术,首先要搞清楚它的基本设计思路,有了这个宏观的技术架构,使用该技术起来,就会得心应手了.否则,就会不知道如何下手,即使看到人家的例子程序,可能也不知其所以然. 下面,就简单的结合自己研究的官方文档,对D3的使用,给其基本设计思路,做一个简单的描述: 在html文件中加载完官方的js插件d3.v3.min.js后: 1. 设计画布(这里主要基于SVG介绍,当然,画布其实还有Canvas). a. 主要包括SVG的大小,含有width,以及height. b. 通过d3全局对象,构建…

D3树状图异步按需加载数据

D3.js这个绘图工具,功能强大不必多说,完全一个Data Driven Document的绘图工具,用户可以按照自己的数据以及希望实现的图形,随心所欲的绘图. 图形绘制,D3默认采用的是异步加载,但是,这里的异步加载,指的是一次性的将图形展示所需要的数据异步的方式加载到浏览器前端显示.主要有如下这两种方式: d3.csv(url[[, row], callback]) Creates a request for the CSV file at the specified url with th…

D3制作基础图表学习总结(part1)

一.基本的环境搭建(和使用其他框架或js库一样) 1.建立一个工程: 2.在html文件中引入D3的文件: 附上git地址:https://github.com/d3/d3/wiki 二.建立图表 1.线性图表: 画线条的思路(下面代码都在js文件中编写,并在htm文件中引入自己写的该js文件): 1)设置存放曲线的位置给html文件中的container容器添加节点svg,并为svg节点设置宽.高. 在svg节点中添加一个g节点(存放线条)并设置其位置(用了css3中的位移属性). 2)画…

【d3 & hexagon】的更多相关文章