Selina_Chan的博客

现在有一种类似树的数据结构，但是不存在共同的根节点 root，每一个节点的结构为 {key: 'one', value: '1', children: [...]}，都包含 key 和 value，如果存在 children 则内部会存在 n 个和此结构相同的节点，现模拟数据如下图：已知一个 value 如 3-2-1，需要取出该路径上的所有 key，即期望得到 ['three', 'three-

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

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

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",

/** * 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

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

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

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

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

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

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)

在绘制二维数组的动态图表之前，我们先来理一下思路：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()

1、二进制的表示：前缀（0b）,八进制的表示（0o）2、Number.isFinite()、Number.isNaN()3、Number.parseInt()、Number.parseFloat()4、Number.isInteger()、Number.EPSILON5、Number.isSafeInteger()6、Math对象的扩展（1）Math.trunc()：去除一

emmmm，使用弹性盒布局就好了哇~~~ 测试 .parent { display: flex; /*justify-content属性定义了子项目在主轴上（X轴）的对齐方式。*/ justify-content: center; /*align-i

let1.所声明的变量只在let命令所在的代码块内有效；2.不存在变量提升，存在暂时性死区（使用let声明变量，只要变量在还没有声明前使用，就会报错）；3.不允许重复声明

es5中：varfunction新增如下：constletclassimport

总概要：(1) Cookies是保存在客户端的小段文本，随客户端请求发送该url下的所有cookies到服务器端，在浏览器和服务器间来回传递。大小4kb限制。同源共享。有效期为expire之前。(2) Session则保存服务器段，通过唯一的值sessionID来区别每一个用户。SessionID随每个请求发送到服务器，服务器根据sessionID来识别客户端，再通过sessi

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

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

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

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

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

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

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

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

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

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

饼状图/** * 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)

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

Our Time! 很抱歉，您的浏览器不支持canvas标签！ var cs = document.getElementById("ourTime"); var ctx = cs.getContext("2d"); function ourTime() { //每调用一次，清除一次画布 ctx.clearRect(0,

1.如果一个数组mydate返回的是一串数字（0~6）,但是你又需要显示成文字。此时，你可以把需要显示的文字再存放在一个数组weekday中，然后用mydate的值作为weekday的下标，即可实现显示为文字。可以参照以下编码：获得星期  var mydate=new Date();  var weekday=["星期日","星期一","星期二","星期三","星期

1.使用webstorm的时候，直接创建html文件，无需将html文件再放到文件夹中；创建css文件时注意需添加.css后缀。2.javascript，二维数组的使用有两种方法：（1）直接赋值：var myarr=[[1,2],[2,3],[3,4]];(2)先new一维数组，再做成二维数组：var myarr=new Array();if(i=0;imyar

使用position:relative，可以相对于其它元素进行定位，但是必须遵守下面规范：1、参照定位的元素必须是相对定位元素的前辈元素： 相对参照元素进行定位从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。2、参照定位的元素必须加入position:relative;#box1{ width:200px; h

树状图和集群图其实差不多，就一点点不一样，见下图：图（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

变换描述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）进行缩放

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

缩放操作 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

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