d3.js v4曲线图的拖拽功能实现Zoom

zoom缩放案例

源码：https://github.com/HK-Kevin/d...；
demo：https://hk-kevin.github.io/d3...；

原理：通过zoom事件来重新绘制x轴scale，同时获得此时scale，在zoom事件的时候调用函数，将每个数据点的xScale重新绘制一遍。

   let data = [[{x: , y: }, {x: , y: }, {x: , y: }, {x: , y: }, {x: , y: }, {x: , y: }, {x: ,y: }, {x: , y: }, {x: , y: }, {x: , y: }, {x: , y: }]]
   //定义图表数据
   let svg = d3.select("svg"),
     margin = {top :,right:,bottom:,left:}, //设值绘图区的布局
     areaWidth = svg.attr("width") - margin.left-margin.right,//获得绘图区的宽高
     areaHeight = svg.attr("height") - margin.top - margin.bottom,

     g = svg.append("g")//绘图区容器，所有的图形都放在这里面
     .attr("transform",`translate(${margin.left},${margin.top})`)
     .attr("width",areaWidth)
     .attr("height",areaHeight)

    let xScale =d3.scaleLinear()//添加x的尺度，线性的尺度
      .domain([,])
      .range([,areaWidth]);

    let yScale = d3.scaleLinear()//添加x的尺度，线性的尺度
      .domain([,])
      .range([,areaHeight]) ;

    let xAxis = d3.axisBottom(xScale) ;//添加底部坐标轴

    let yAxis = d3.axisLeft(yScale)  ;//添加左部坐标轴

    let line = d3.line()    //线生成器，就是把data的数据通过x,y的尺度转化为此坐标轴对应的数据
    .curve(d3.curveStepAfter)
    .x(function(d){
      return xScale(d.x)
    })
    .y(function (d) {
       return yScale(d.y)
    });

    let t =d3.transition()//定义动画
         .duration()  //持续时间
         .ease(d3.easeLinear)//动画type

   let xGrooup = g.append("g") //生成x轴
     .attr("transform",`translate(,${areaHeight})`)
     .call(xAxis)

   let yGroup =  g.append("g")//生成y轴
      .attr("transform",`translate(,)`)
      .call(yAxis)

      g.append("clipPath") //添加一个剪切区，超出这个区的图形都不显示
     .attr("id", "clip")
     .append("rect")
     .attr("width", areaWidth)
     .attr("height", areaHeight);

    let updateLine = g.append("g")   //enter 、update、exit
     .attr("class","chart")
     .selectAll("line")
     .data(data)

     let enterLine = updateLine.enter();
     let exitLine = updateLine.exit();

   let path =  enterLine.append("path")
     .attr("clip-path", "url(#clip)")
     .attr("class","line")
     .attr("d",line)
     .attr("fill","none")
     .attr("stroke",)
     .transition(t)
     .attr("stroke-width",)
     .attr("stroke","green")

     exitLine.remove();

     let zoom = d3.zoom()              //设置zoom参数
         .scaleExtent([, ])          //放大倍数
         .translateExtent([[,], [areaWidth, areaHeight]])//移动的范围
          .extent([[, ], [width, height]])
            //视窗 （左上方，右下方）,默认最近父级元素的[0,0],[width,height]
         .on("zoom", zoomed);          //zoom事件，调用zoomed函数

     let zoomRect = svg.append("rect") //设置缩放的区域，一般覆盖整个绘图区
     .attr("width",areaWidth)
     .attr("height",areaHeight)
     .attr("fill","none")
     .attr("pointer-events","all")
     .call(zoom);

   function zoomed() {
       let t = d3.event.transform.rescaleX(xScale)  //获得缩放后的scale
       xGrooup.call(xAxis.scale(t))                 //重新设置x坐标轴的scale
       g.select("path.line").attr("d", line.x(function(d){ //获取曲线，用新的x尺度来计算line
         return t(d.x)}))
     }