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);

D3学习笔记

这是最后的效果图

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

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

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

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

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

秒客网

D3学习笔记

datum()的工作过程

相关文章