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 ：路径终点处