更新于 

d3-zoom

d3-zoom官方文档https://d3js.org/d3-zoom#zoom

Zoomable bar chart

官方代码地址
关于zoom

要实现一个可以实现滚动、平移的柱状图，
ECharts中用到的一般都是datazoom组件，
d3中提供了zoom类

d3-zoom经常用于d3-scale和d3-axis的交互操作

核心代码

和普通柱状图一样，创建svg、横纵坐标系、柱状图g后，
需要给svg标签添加zoom功能:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function zoom(svg){
    let extents = [
        [marginTop - width/2],
        [width/2 - marginTop]
    ]
    svg.call(
        d3.zoom()
            .scaleExtent([1,8]) // 缩放级别
            .translateExtent(extents) // 平移范围
            .extent(extents) // viewBox尺寸范围
            .on('zoom',zoomed) // 绑定zoom事件
    )
    function zoomed(event){
        // 更新x轴配置
        x.range([marginLeft-width/2, width/2-marginLeft].map(d=>
            event.transform.applyX(d)
        ))
        // 重绘柱子宽度和位置
        svg.selectAll('.bars rect')
            .attr('x',d=>x(d.letter))
            .attr('width',x.bandWidth())
        // 重绘x轴
        svg.select('.x-axis')
            .call(d3.axisBottom(x).tickSizeOuter(0))
    }
}
svg.call(zoom)

本例为svg指定的d3.zoom()配置了4个属性：

  • scaleExtent 缩放级别
  • translateExtent 平移范围
  • extent viewBox视口范围
  • zoom事件

在d3.zoom()绑定的zoom事件中，做了三件事：

  • 更新x轴生成器函数
    • 将x轴的范围通过zoom.transform.applyX 函数进行变换
    • applyX的加工函数为xk + tx
  • 重新绘制柱子，改变柱子的x坐标和width宽度
  • 根据更新的x轴生成器函数，重新绘制x轴