Selina_Chan的博客

对一个被选择的元素，添加监听操作，代码如下：.on("click", function(){ } )   常用的事件（event）有：click  ： 鼠标单击某元素时，相当于 mousedown 和 mouseup 组合在一起mouseover  ： 鼠标移到某元素上mouseout  ： 鼠标从某元素移开mousemove ： 鼠标被移动mousedown

常规设置： var width = 400, height = 400; var str = "云中谁寄锦书来，雁字回时，月满西楼"; var svg = d3.select("body").append("svg") .attr("width",width) .attr("height",height)

一、引用js文件或者二、函数的参数文件里实现了一个appendMultiText（）函数，其个参数的意义为：appendMultiText( container, //文本的容器，可以是或 str, //字符串 posX, //文本的x坐标

一、在OpenOffice中编辑和保存csv文件（1） 首先，打开 OpenOffice Calc 。就像 Microsoft Office 中有 Word、Excel、PowerPoint 一样，OpenOffice 中编辑表示使用的是 Calc 。打开之后，像正常一样输入单元格的内容，假设输入如下：（2）点击“文件”，“另存为”。文件类型选择 “CSV 文本”，底下再勾选上“编辑筛

relation.json：{ "nodes":[ { "name": "云天河" , "image" : "SilenceImage/tianhe.jpg" }, { "name": "韩菱纱" , "image" : "SilenceImage/lingsha.jpg" }, { "name": "柳梦璃" , "image" : "SilenceI

size()用于设定力学图的作用范围，使用方法为 force.size( [ x , y ] )，这个函数用于指定两件事：重力的重心位置为 ( x/2 , y/2 )所有节点的初始位置限定为 [ 0 , x ] 和 [ 0 , y ] 之间（但并非之后也是如此）如果不指定，默认为 [ 1 , 1 ] 。linkDistance()指定结点连接线的

/** * Created by Silence_C on 2016/5/4. */var width = 600, height =400;var svg = d3.select("body").append("svg") .attr("width",width) .attr("height",height) .append("g");var color

var width = 600, height = 400, radius = Math.min(width, height) / 2 , color = d3.scale.category20();var svg = d3.select("body").append("svg") .attr("width",width) .attr("height",

一、node()：将根数据传入后，得到的节点的数组，每个节点添加8个参数:parent - 父节点children - 子节点value - 表示节点的大小，由下面 value() 函数指定的值，父节点的值等于子节点值的和depth - 节点的深度x - 节点的x方向的坐标（不一定指x轴方向，跟据 size() 函数的意义而定）y - 节点的y方向的坐标（同上）dx - x方向扩展的宽

首先我们要明白如何在svg中进行箭头的绘制：先写一对，里面再写一对，其中marker的属性意义为：viewBox坐标系的区域refX, refY在 viewBox 内的基准点，绘制时此点在直线端点上（要注意大小写）markerUnits标识大小的基准，有两个值：strokeWidth（线的宽度）和userSpaceOnUse（图形最前端的

在绘制二维数组的动态图表之前，我们先来理一下思路：1、我们需要绘制一张图表；2、这张图表的数据来源是二维数组；3、这张图表有动态效果。那么，我们一步一步来：首先，我们来随意写一串二维数组，确定数据来源：var data =[[1993,10],[1998,20],[2002,25],[2007,30],[2010,50],[2015,80],[2016,90]]然后，我

//随机生成数据var rand = d3.random.normal(0,25)var dataset = [];for (var i = 0;i <100;i++){ dataset.push(rand());}一、直方图数据转换函数：//数据转换var bin_num = 15var histogram=d3.layout.histogram()

线段：矩形：圆角矩形：圆形：椭圆形：多边形：折线： //注意需把fill设成noneSVG有两种判断某个点是否在多边形中的规则。分别对应fill-true属性的nonezero（默认值）和evenodd。其效果图分别如下：图1 nonezero（默认属性）图2 evenodd属性笔画特性：属性值

举个栗子，展示一下使用格式： 注意：①元素自身不会显示，需要放在元素中，因为它是存放复用元素的；②refX、refY属性可以指定标记的坐标系统中与路径的开始对齐，使得图像标记显示在精

命令参数效果M mx y 移动画笔到给定坐标，即起点L lx y 绘制一条到给定坐标的线，可提供多组坐标绘制折线H hx绘制一条到x坐标的横线V vy绘制一条到y坐标的竖线A arx ry（半径） x-axis-rotation（x轴的旋转角度） large-arc-flag（若需要圆弧

在基本图形绘制中，我们只用了纯色为图形对象填充颜色和绘制轮廓。其实，出来纯色以外，我们还可以使用图案和渐变来填充图形或者绘制图形轮廓。一、图案填充：我们首先来看图案填充，要使用图案，首先要定义一个水平或垂直方向重复的图形对象，然后用它填充另一个对象或者作为画笔使用。这个图形对象称作tile（瓷砖），因为使用图案填充对象的行为很想在地面上铺瓷砖的过程。

var dataset = [30,43,120,87,99,167,142]var width = 500, height = 500;var rectWidth = 30, rectStep= 35;var svg = d3.select("body").append("svg").attr("width",width).attr("height",height)

可拖动的地图 .link { stroke: #ccc; stroke-width: 1; }一、常规设置：var width = 1000, height = 1000;var svg = d3.select("body").append("svg") .attr("width",width)

1. update()    当对应的元素正好满足时 （ 绑定数据数量 = 对应元素 ）    实际上并不存在这样一个函数，只是为了要与之后的 enter 和 exit 一起说明才想象有这样一个函数。但对应元素正好满足时，直接操作即可，后面直接跟 text ，style 等操作即可。2. enter()    当对应的元素不足时 （ 绑定数据数量 > 对应元素 ）    当

饼状图/** * Created by Silence_C on 2016/4/25. */var width = 600, height = 600;var dataset = [30,10,43,55,13];var svg = d3.select("body").append("svg") .attr("width",width)

绘制力学图总结为如下步骤：一、确定数据源：        绘制力学图，你需要知道定点和边，如下：var nodes = [ {name:"GuiLin"}, {name:"GuangZhou"}, {name:"XiaMen"}, {name:"HangZhou"}, {name:"ShangHai"}, {name:"QingDao"}

我们先来说一下利用D3来绘制线型图表与坐标轴的思路：1、定义图表容器：container2、定义一些数据来生成数据曲线3、给图表添加坐标轴，包括文字接下来就开始干活吧!创建好HTML文件d3Test.html： D3 Test! //注意导入d3.js文件，或者也可以直接引入：script src="http://d3

首先我们要明白弦图所要表达的意思是什么？比如我们有以下一组关于地区人口的数据：var city_name = ["北京","上海","广州","深圳","香港"];var population = [ [1000,3015,4567,1234,3714], [3214,2000,2060,124,3234], [8761,6545,3000,8045,647],

数据源：city.json：{ "name":"中国", "children": [ { "name":"浙江" , "children": [ {"name":"杭州" }, {"name":"宁波" }, {"name":"温州" }, {"name":"绍兴" }

树状图和集群图其实差不多，就一点点不一样，见下图：图（1）：集群图——d3.layout.cluster()图（2）：树状图——d3.layout.tree()这样一来差别就看出来了。由于两者的代码差不多，这里就直接附上树状图源码，不多加解释咯~city.json文件：{ "name":"中国", "children": [

打包图其实就是画圈圈，就把数据通过d3.layout.pack()转换一下即可咯~ 打包图/** * Created by Silence_C on 2016/4/27. */var width = 600, height = 600;//定义数据转换函数var pack = d3.layout.pack().size([width,he

常规定义：var width = 500, height = 500;var dataset = [30,10,43,55,13]var color = d3.scale.category10()var svg = d3.select("body").append("svg") .attr("width",width) .attr("height",height)

拖拽操作 var width =2000, height = 2000; var svg = d3.select("body").append("svg") .attr("width",width) .attr("height",height) var color = d3.scale.cate

缩放操作 var width = 400, height = 400; var circles =[{cx:150,cy:200,r:30}, {cx:250,cy:200,r:30}] var svg = d3.select("body").append("svg") .attr("width",wi

在上一篇的文章里我们可以知道，线型图表的制作主要是采用了 d3.svg.line() 这个函数进行绘制的，比较线型图表的绘制方法，我们只要采用 d3.svg.area() 这个函数即可实现面积图表的绘制啦~！ 具体代码实现如下啦~：/** * Created by Silence_C on 2016/4/14. */var width = 500,height = 200;marg

变换描述translate(x,y)平移操作，若x或y没指定，则为0scale(a,b)或scale（m）缩放操作rotate(angle)或rotate(angle,cx,cy)绕原点（或指定点（cx,cy））旋转translate（-cx*(m-1),-cy*(m-1)）;scale(m)绕指定点（cx，cy）进行缩放

一、使用datum（）绑定数据 Fire Water Wind var p = d3.select("body").selectAll("p"); p.datum("Thunder") //绑定字符串Thunder到选择集上 .text(f

d3中文api