d3要封装的函数

两个点之间的直线长度

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