d3---要封裝的函數

一 座標軸

1.生成比例尺

let xscale=d3.scaleLinear([0,400],[0,300])

2.生成座標軸函數

let xaxis=d3.axisBottom(xscale)

3.生成座標軸

let xg=svg.append('g').attr('transform',`translate(${padding.left},${svgHeight-padding.bottom})`).call(xaxis)

二 將數值變成座標系上的座標

1.x座標---線性比例尺---mx

function mx(x){
  return xscale(x)+padding.left
}

2.y座標---線性比例尺---my

function my(y){
  return yscale(y)+svgHeight-axisHeight-padding.bottom
}

三 兩個點之間的直線長度

function length(x0,y0,x1,y1){
    x0-=x1;y0-=y1;
    return Math.sqrt(x0*x0+y0*y0)
}

四 一段直線從兩端相向縮短r長度

function faceToface(dot0,dot1,r){
      let difX=dot0[0]-dot1[0],
          difY=dot0[1]-dot1[1]
      let bigR=Math.sqrt(difX*difX+difY*difY)
      let changeY=Math.abs(difY/bigR*r)
      let changeX=Math.abs(difX/bigR*r)
      let x0=dot0[0]>dot1[0]?dot0[0]-changeX:dot0[0]+changeX
      let y0=dot0[1]>dot1[1]?dot0[1]-changeY:dot0[1]+changeY
      let x1=dot1[0]>dot0[0]?dot1[0]-changeX:dot1[0]+changeX
      let y1=dot1[1]>dot0[1]?dot1[1]-changeY:dot1[1]+changeY
      return [[x0,y0],[x1,y1]]
}

實例驗證的代碼

let circles=[[100,300],[300,100]]
let cut=faceToface(circles[0].slice(),circles[1].slice(),50)
console.log(cut)
this.svg.selectAll('.circle').data(circles).join(enter=>{
            enter.append('circle')
                         .attr('cx',d=>d[0])
                         .attr('cy',d=>d[1])
                         .attr('r',50)
                         .attr('fill','none')
                         .attr('stroke','#000')
 })
 this.svg.append('path')
         .attr('d',d3.line()(circles))
         .attr('stroke','yellow')
 this.svg.append('path')
         .attr('d',d3.line()(cut))
         .attr('stroke','red')