d3.js画图

论文需要用到美观的图，因此打算用d3.js呈现。

下载d3.zip，并解压到网页文件所在的文件夹

windows下，在命令行进入网页文件夹，输入

python -m http.server

　　在浏览器中输入127.0.0.1:8000/xxx.html

示例如下，html文件和data存在同一个目录下

https://bl.ocks.org/mbostock/3884955

时间： 2024-10-11 05:02:56

d3.js画图的相关文章

D3.js从入门到“放弃”指南

前言近期略有点诸事不顺,趁略有闲余之时,玩起D3.js.之前实际项目中主要是用各种chart如hightchart.echarts等,这些图形库玩起来貌都是完美的,一切皆可配置,但几年前接触了D3之后,觉得前面那chart类库局限的地方在于,基本不可定制:而D3呢,你说了算,你想画出什么样的图,你说了算,自由度很大,当时就有点膜拜和仰慕,小打小闹的玩了几下,没有沉下心来专心去玩,当时觉得真的很难.不理解,也看不进去. 后面因为接触了react.redux,接触了函数式编程.再回过头来从新捣鼓起

怎么学习d3.js

vue是一个数据驱动视图的前端框架,一切皆可作为可重用的组件加以使用 d3则是数据可视化javascript库 D3.js基础 1.学习D3.js的语法语法是必需的,建议自行去官网上学习其语法,如果可以的话最好了解一下函数式编程的curry与compose思想,不建议一开始就去接触高大上的众多在线Demo. 2.学习D3.js的编程思路 (1)语法其实可以体现其编程思路,起步当然是学习其强大的选择器: d3.select('body').style('background-color', 'b

d3.js学习

画svg图像 1.添加svg元素 2.添加g元素,g元素是一个分组的元素,相当于html中的div元素 3.画图像 4.画坐标轴 ----------------------------------------------------------------------------- d3画闲线性曲线例子 html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&

【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板

绑定数据之后,选择集分为三部分:update.enter.exit.这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板. 1. enter的处理方法如果没有足够的元素,那么处理方法通常是使用append()添加元素.请看下面的代码: <body> <script> var dataset = [3, 6, 9]; var p = d3.select("body").selectAll("p

Learning D3.js d3的path讲解

转帖: http://jsbin.com/omajal/23/edit?html,output svg的path标签被称为”可以组成任何形状的形状” SVG Path可以绘制任何形状的图形,包括矩形,圆形,椭圆,折线,多边形,直线,曲线等.W3 标准对SVG 的Path定义如下SVG路径代表一个形状的轮廓,可以描边,填充,用作剪切路径,或任何三者的结合.W3提供了一个形象的比喻,用钢笔和纸来表示svg的path* 想象一个钢笔放在一张纸上.* 钢笔在某点与纸接触.* 笔尖移动到另一处.* 这两个

【 D3.js 入门系列 — 11 】入门总结

D3 新专题首页一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作. D3.js 最早的 v1.0 版本号是由 Michael Bostock 于2011年2月18日公布,其后经过多人的不断完好,眼下最新的版本号为 v3.4.11.从公布至今三年多的时间里,D3.js 在国外不断有人尝试并制作教程.成为了流行的数据可视化工具.可是眼下在国内能查询到中文资料还比較少

【 D3.js 进阶系列 — 6.0 】拖拽的应用（Drag）

拖拽(Drag)是交互式中很重要的一种,本文将讲解拖拽的使用方法. 1. drag的定义 D3中可用 d3.behavior.drag() 来定义 drag 行为. var drag = d3.behavior.drag() .on("drag", dragmove); function dragmove(d) { d3.select(this) .attr("cx", d.cx = d3.event.x ) .attr("cy", d.cy =

【 D3.js 入门系列 --- 9.6 】打包图的制作

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 打包图( Pack ),用于包含与被包含的关系,也表示各个对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 先看本节所使用的数据: city2.json 这是各城市所属关系的数据.我们现在要用 D3 的 layout 来转换数据,使其容易进行可视化处理. var pack = d3.layout.pack() .size([ width, heigh

[2] D3.js中如何使用数据和选择元素

对D3.js或数据可视化有兴趣的朋友欢迎到 www.ourd3js.com 讨论. 接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: Hello World 1 Hello World 2 Hello World 3 定义一个集合set,里面有三个元素: var set = ["I like dog","I like cat&qu