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