记得上次看d3应该是1年前的事情了,当时还一边看一边写了d3(v5.7)的一个学习笔记:https://www.cnblogs.com/eco-just/tag/d3/ 后来转战three.js就没继续研究了(其实也是感觉api层面的东西也没有深入研究的必要,何况后续项目也不会用到这些东西). 期间也有同行通过博客问过弦图的问题,出于种种原因吧,当时并没有深入研究. 但是今天!我们就结合d3的3.5.16版本来深入解析一下d3的弦图吧.(demo是找的简书上这为同学的笔记:https://www

前文中已经提到,SVG从诞生之初起就可以非常方便地使用javascript脚本语言来进行其DOM对象的控制.当然,控制的方法有很多,有直接控制SVG对象的方法,例如使用原生js:有帮你封装一下图形接口再进行直接控制的js类库,如 Raphaël.但是正如我在第一篇文章中所说,d3作为一个中间型类库还能脱颖而出的重要原因,在于它突破了其他类库的那种直接控制表现层的机制,而采用了对于web图形处理领域较为新颖的数据驱动机制(2011),并获得了极大的成功. 数据驱动的历史 数据驱动编程并不是一个新鲜

自诞生之初截止目前(2016年初),React可以说是前端界最流行的话题,如果你还不知道React是何物,你就该需要充充电了. d3是由纽约时报工程师开源的一个绘制基于svg的数据可视化工具,是近几年最流行的visualization工具库之一.d3提供丰富的svg绘制API.动画甚至布局等功能,目前市面上大多数visualization仓库是由d3构建的.d3的优势在于将data与DOM绑定,理想化的方案是直接操作data而不是操作DOM来实现UI的更新,从这个角度上讲,d3的理念与React

如何使用d3来解析自定义格式的数据源? var psv = d3.dsvFormat("|"); // This parser can parse pipe-delimited text: var output = psv.parse("first|last\nabe|lincoln") console.log(output[0]) // 将输出以下内容: => {first: "abe", last: "lincoln"

说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需求,那就太难了.这个时候,聪明的小伙伴会转而学习一些基础的,定制化程度更高的框架,而其中最杰出的就是D3.js,由于我是专为北京地铁定制化软件,经常会用到数据可视化,废话不多说先上北京地铁路网,因为今天是入门教程,但是我不想讲svg基础知识,只讲一点基础内容饼图,大佬请绕行. 1.绘制饼图的预备知识

前言 25年过去了,Brooks博士著名的“没有银弹”的论断依旧没有被打破.HTML5也是一样.但这并不妨碍HTML5是一个越来越有威力的“炸蛋”:发展迅速.势不可挡.随着HTML5技术的普及,用HTML5做可视化呈现的项目越来越多了.HTML5的优势明显:网页上直接运行无需插件.手机平板方便兼容.代码开发和维护相对容易,等等.一大波一大波的做Java..NET甚至C++桌面的程序老手们都纷纷开始研究javascript了,而初出茅庐的新一代程序猿更是义无反顾的直奔HTML5这个技术大热点而来.

Canvas是HTML的API,我们可以用它在网页中实时的来生成图像. 文章导读 1.必备技能 2.用于画图的函数 例子: -会话气泡-    -心形-    -钟表-      -星球里的星星- -调色板-      -鼠标绘图-      -旋转的小方块- 3.图像的处理 例子: -图像的灰度和翻转效果-     -拾色器- -放大镜-      -图像的高斯模糊- 一.必备技能 <canvas id="Canvas" width="400" height

转载请注明出处: 转载自Bin's Blog:  angularjs & d3 实现资源展示( http://www.wenbin.cf/post/27/ ) angularjs结合d3js实现资源展示 之前有用过d3js实现拓扑结构,这次需要调取一些kubernetes后台数据,发现angularjs已经能够注入d3来做这件事了,很开心啊 一个例子 首先注入d3js (function () { 'use strict'; angular.module('Myapp', []).directi

什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过一套完整的绘图功能类似于其他通用二维的API,从而生成动态的图形. 我们可以用Canvas做以下: 1. 游戏:毫无疑问,游戏在HTML5领域具有举足轻重的地位.HTML5在基于Web的图像显示方面比Flash更加立体.更加精巧,运用Canvas制作的图像能够令HTML5游戏在流畅度和跨平台方面发挥

简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 /10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘.整合的能力. 支持折线图(区域图).柱状图(条状

一.画线 只有在drawRect中才能获取到跟view相关联的上下文 - (void)drawRect:(CGRect)rect {} 一条线 // 1.获取跟当前View相关联的layer上下文(画板) // 总结:目前获取的所有上下文都是以UIGraphics开头 // CGContextRef:上下文类型 // CG:CoreGraphics Ref:引用 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.绘制内容,拼接路径 //

前言 本篇详细介绍canvas画布的API.说是详细介绍,也只是一些常用的API及简单实例和说明.LZ本人也还没有看完全部,下篇会介绍剩余的一些内容. 本篇的示例中,LZ加入了注释,为的是只简单介绍API确实挺无聊,也不那么容易理解,看代码看效果才最直接. canvas APIs canvas 基础api 介绍 在初始化Javascript函数中,用canvas标签的id获得canvas的DOM对象,并用getContext() 方法获得这个canvas的“2d”上下文对象,之后使用上下文对象调

从简单的基本图形,到复杂炫酷的动画,通过canvas元素获取的2D图形渲染上下文CanvasRenderingContext2D,能够使用丰富的API来进行图形绘制.这篇文章将会总结在之前的canvas教程中用到的所有渲染上下文的API. 可以参考之前的教程: 如何绘制基本图形可以参考:canvas基本图形绘制 如何对基本图形移动旋转缩放可以参考:canvas图形变换 如何设置基本图形颜色和样式可以参考:canvas样式和颜色 如何使用外部图片以及图形组合可以参考:canvas使用图片,图形组合

iframe里有一个srcdoc属性,很有用! window.location.href=document.referrer//可以实现返回上一级页面并刷新 HTML5权威指南©®,比较老的书了,有些知识过时了!!! HTML5高级程序设计 也是比较老的书了. 0.0一些网站: http://caniuse.com/ 查询浏览器支持情况 https://www.w3.org/html/  [w3c的html首页] https://www.w3.org/TR/2016/WD-html51-2016

创建一个Canvas画布的方法如下: 复制代码 代码如下: <canvas id=”canvas” width=”600” height=”400”></canvas> 可以在标签中添加<canvas>标签不可用时的替代文本,如下所示: 复制代码 代码如下: <canvas id=”canvas” width=”600” height=”400”><p>Your browserdoes not support the canvas element

HTML5中新增了<canvas>画布标签,通过它,可以使用JavaScript在网页中绘制图像.<canvas>标签在网页中得到的是一个矩形空白区域,可以通过width和height属性来调整其宽和高.创建一个Canvas画布的方法如下: <canvas id=”canvas” width=”600” height=”400”> <p>Your browserdoes not support the canvas element.</p> va

我们知道d3的一般套路就是d3.selectAll('path.mypath').data(yourDataset).enter().append('path').attr('class','mypath').attr('d',thePathString) 而thePathString的获取,一般都是根据绑定的yourDataset来生成的.具体生成方式有: 1. 通过程序自己一节一节地拼凑起来path的d属性,比如在d3v4中由于取消了diagonal对角线生成器,我们可以通过下面的代码手工拼

D3 layouts help you create more advanced visualisations such as treemaps: D3 layouts帮助您创造更加高级复杂的可视化图表,比如treemaps,packed circles,network graphs: Layout is just a JavaScript function that takes your data as input and adds visual variables such as posit

本文将视图了解d3js提供的帮助我们创建矢量图形的helper函数,比如下面的: http://d3indepth.com/shapes/ lines curves pie chart segments symbols SVG 首先我们来认识一下SVG(scalable vector graphics).要知道上面例子中的图形实际上都是由SVG的path元素构成的.每张图都有不同的path元素来组成,这些path元素本身的d属性来定义图形的path.而path data由一系列的命令组成(比如:

简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘.整合的能力. 支持折线图(区域图).柱状图(条状图

今天学习了下HTML5的基本知识,用画笔在画布上画了几个东西,效果如图,相关代码如下,注意点总结在末尾: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <canvas id="can1" width="500px" height="500px" style=&