d3---各种知识点

一 join

实心选择集---可以接着添加dom---selection.append(dom)

this.svg.selectAll('.path').data([1,1,1]).join('path')

Ct {_groups: Array(1), _parents: Array(1)}
_groups: [Array(3)]
_parents: [svg]
__proto__: Object

空心选择集---不能接着添加dom

this.svg.selectAll('.path').data([1,1,1]).join(enter=>{})

Ct {_groups: Array(1), _parents: Array(1), _enter: Array(1), _exit: Array(1)}
_enter: [Array(3)]
_exit: [Array(0)]
_groups: [Array(3)]
_parents: [svg]
__proto__: Object

空心选择集变实心选择集

selection.enter()

二 link

1.贝塞尔曲线

最重要的生成路径字符串的---回调函数

d3.linkHorizontal()
  .x(d=>d.x)
  .y(d=>d.y)
//其中d可以访问到source:{},target:{}对象

#### 绑定的数据格式
(4) [{…}, {…}, {…}, {…}]
0: {source: vl, target: vl}
1: {source: vl, target: vl}
2: {source: vl, target: vl}
3: {source: vl, target: vl}
length: 4
__proto__: Array(0)

三 Pt---新版本的选择集类

以前打印出来的好像是Ct

四 style---操作css样式

.attr('style','fill:none;pointer-events:all') .style('display','none')//可累加
//取消样式
focus.style('display',null)

五 获取鼠标的坐标

d3.mouse(dom)

.on('mouseenter',function(){
    //鼠标的坐标
    console.log('enter',d3.mouse(target))
})

六 画弧的两种方法

let arc=d3.arc()
          .innerRadius(50)
          .outerRadius(100)
          .startAngle(0)
          .endAngle(0)
let path=arc()
//这一种方法可以直接改动某个参数
let path=arc.endAngle(Math.PI)()

//第二种
let arc=d3.arc({
  innerRadius:,
  outerRadius:,
  startAngle:,
  endAngle:,
})
let path=arc()

七 弧的中心点用法---arc.centroid

arc.centroid({
  innerRadius: 0,
  outerRadius: 100,
  startAngle: 0,
  endAngle: Math.PI / 2
});
//如果其中的参数用函数指定后，可以不用写
arc.innerRadius(50).outerRadius(100)
arc.centroid({
  startAngle: 0,
  endAngle: Math.PI / 2
});

八 each

1.不改变原数组

2.绑定完dom后接

g.selectAll("path")
    .data(resultData)
    .enter().append("path")
    .each(d=>{
         console.log(d)
         d.location=lines(d)
    })