转载请注明出处: 转载自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…

仿照D3JS官网上的美国地图制作了一个中国版的地图. D3JS官网上的版本: http://bl.ocks.org/NPashaP/a74faf20b492ad377312 中国版的地图效果: 如要制作其他国家或其他具体省份-市区级的地图,只需替换掉javascript中的SVG地图数据即可.地图上每个省份的统计数据是随机生成的,可根据需求导入实际业务数据. 分享一个SVG地图数据的网站:https://commons.wikimedia.org/wiki/Category:SVG_maps_o…

http://d3js.org/ http://www.ourd3js.com/wordpress/?p=51 http://www.ourd3js.com/wordpress/?p=104file:///D:/test/d3/test.html http://bost.ocks.org/mike/join/ https://github.com/mbostock/d3/wiki/SVG-Shapes http://www.w3.org/TR/SVG/shapes.html#CircleElem…

http://d3js.org http://blog.csdn.net/lzhlzz/article/details/27497157…

摘要:本文以本人目前所做项目为基础,从设计的角度探讨数据可视化的设计的方法.过程和结果,起抛砖引玉之效.在技术方案上,我们采用通用web架构和d3js作为主要技术手段:考虑到项目需求,这里所做的可视化案例都是数据演示工具,不是数据探索工具.其中所用截图,并非最终效果图. 一．             基础说明 1.       基础技术 使用D3js绘制图形 图1,五彩斑斓的d3js D3js是应用在web开发上的开源JS组件库,是一个数据可视化工具.D3的全称是Data-Driven Docu…

d3js是数据驱动图形的思路.基本可以这么理解,有什么样的图形,后面基本就有类似结构的数据.大概思路步骤如下: 一.适配数据格式 这一步主要是为第二部服务,第一步的结果作为第二部的入参. 比如,画层级图,需要特别的输入格式,如 d3.hierachy 如果第二步的数据正合适,第一步可以省. 二.数据布局 (layout data) 这一步就是将数据格式化,类似于图形.比如, 比如,画层级图时候,pack(hierachy), 这时候形成数据格式类似于图形了 如果图形简单可直接用常规数据结构,如柱…

0---什么是d3js: d3js是一个开源的,基于对svg操作的数据可视化框架,简单的说他提供了数据提供了一系列的数据可视化工具,可以用他很方便的创造出关于svg的动画:svg动画具有可伸缩,不失真,响应快等特点: 1---什么是svg: svg是w3c组织规定的一套xml的子集目的就是为了在网站中制作简单的矢量图:常见用法和html.差不多,只是常见的标签不同,svg.常见的标签有: <rect> <cricle> <path> 等等,d3js也是通过提供操作这些标…

canvas 绘制2D位图. Echarts是基于Canvas技术的可视化工具,底层封装了原生的JavaScript的绘图 API. canvas里面绘制的图形不能被引擎抓取,canvas中我们绘制图形通常是通过javascript来实现. svg 绘制2D矢量图. svg里面的图形可以被引擎抓取,支持事件的绑定,svg更多的是通过标签来实现. webgl 用3D画位图的api. threejs 基于webgl的3D场景库 d3js 数据可视化工具,只支持svg…

我们知道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…