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