D3学习笔记

学习资源  http://www.ourd3js.com/wordpress/396/

大神得学习资料很是丰富，初级到高级还有入门视频，深得我心啊

1  update ,enter,exit 概念定义

1   

2

datum()的工作过程

那么datum()的工作过程就再明了不过了，即对于选择集中的每一个元素，都为其增加一个__data__属性，属性值为datum(value)的参数value。此处的value并非一定要是number（数值）型，也可以是string（字符串）、boolean（布尔型）和object（对象），无论是什么类型，其工作过程都是给__data__赋值。如果使用undefined和null作为参数，则将不会创建__data__属性。

data和datum的区别

3   data(xx,function(d){console.log(d.id)})

相当于用data后面的function他要执行两次  不然的话报错直接说d找不到

4  在angular2中使用d3.js遇到的坑，画树状图

因为在angular2中有类型的对应，所以经常在页面中

常规的tree.nodes()只有以下大框中的方法

报错后可以通过点击components.ts里面的属性进入上面的index.d.ts

然后做修改，虽然我不知道具体什么原理，并且也没有在真正的源码上修改，但是这里修改后没有报错，特别是使用键函数的时候data(xx,function(d){return d.id})  他可以通过后面的键函数达到对数据的更新，删除，填充的监控修改    没有用到键函数  就就          

   就只是页面的铺展，这样的话后期在进行交互操作的时候回有问题看！

5  箭头符号的绘制

var svg = d3. select( ".contain")

. append( "svg")

   . attr( "width", width + padding. left + padding. right)

   . attr( "height", height + padding. top + padding. bottom)

. append( "g")

. attr( "transform", "translate("+ padding. left + "," + padding. top + ")");

//设置箭头符号的容器

var defs = svg. append( 'defs');

//画箭头符号

var arrowMaker= defs. append( "marker")

. attr( 'id', 'arrow')

. attr( 'markerUnits', 'strokeWidth')

. attr( 'markerWidth', '12')

. attr( 'markerHeight', '12')

. attr( 'viewBox', '0 0 12 12')

. attr( 'refX', '16')

. attr( 'refY', '6')

. attr( 'orient', 'auto')

//箭头路径

var arrow_path = "M2,2 L10,6 L2,10 L6,6 L2,2";

//箭头路径颜色填充

arrowMaker. append( "path")

. attr( "d", arrow_path)

. attr( "fill", "#000");

linkEnter. insert( "path", ".node")

. attr( "class", "link")

. attr( "d", function( d) {

var o = { x: source. x0, y: source. y0};

return diagonal({ source: o, target: o});

})

. attr( 'marker-end', "url(#arrow)")

. transition()

. duration( 500)

. attr( "d", diagonal);

这是最后的效果图

首先我们要明白如何在svg中进行箭头的绘制：

先写一对<defs>，里面再写一对<marker>，其中marker的属性意义为：

viewBox	坐标系的区域
refX, refY	在 viewBox 内的基准点，绘制时此点在直线端点上（要注意大小写）
markerUnits	标识大小的基准，有两个值：strokeWidth（线的宽度）和userSpaceOnUse（图形最前端的大小）
markerWidth, markerHeight	标识的大小
orient	绘制方向，可设定为：auto（自动确认方向）和 角度值
id	标识的id号

在不同的位置绘制的属性如下：

• marker-start ：路径起点处
• marker-mid：路径中间端点处（必须是 path 中间出现的点）
• marker-end ：路径终点处