d3-zoom, 使用鼠标或者触摸输入平移和缩放 SVG HTML或者画布

分享于 

3分钟阅读

GitHub

  繁體
Pan and zoom SVG, HTML or Canvas using mouse or touch input.
  • 源代码名称:d3-zoom
  • 源代码网址:http://www.github.com/d3/d3-zoom
  • d3-zoom源代码文档
  • d3-zoom源代码下载
  • Git URL:
    git://www.github.com/d3/d3-zoom.git
    Git Clone代码到本地:
    git clone http://www.github.com/d3/d3-zoom
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/d3/d3-zoom
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    d3-zoom

    平移和缩放是很流行的交互技术,它允许用户通过限制视图来关注感兴趣的区域,平移和缩放广泛应用于基于web的地图绘制中,但是也可用于时间序列,scatterplots等可视化。

    由d3-zoom实现的缩放行为是一个方便而灵活的抽象,用于启用全景放大d3-selection,缩放行为与DOM无关,因此你可以将它与SVG,HTML或Canvas一起使用。

    缩放行为也被设计为使用d3比例d3轴;请参见transform.rescaleXtransform.rescaleY,你还可以使用zoom.scaleExtent限制缩放,并使用zoom.translateExtent

    Axis Zooming

    缩放行为可以与其他行为相结合,例如,用于拖动的d3-drag和用于focus =context的d3-brush

    Brush & Zoom

    可以使用缩放,转换以编程方式控制缩放行为,从而允许你实现用户界面控件,这些控件可驱动显示或通过你的数据生成动画教程,平滑缩放转换基于"Smooth and efficient zooming and panning"由Jarke J.van Wijk 和 Wim A.A . Nuij开发。

    有关平移和缩放地图的示例,请参阅 d3-tile

    安装

    如果使用NPM,npm install d3-zoom,否则,下载最新发布,也可以直接从d3js.org加载,可以是独立库,也可以作为D3 4.0,支持AMD,CommonJS和vanilla环境,在vanilla中,导出一个d3全局变量:

    <scriptsrc="https://d3js.org/d3-color.v1.min.js"></script>
    <scriptsrc="https://d3js.org/d3-dispatch.v1.min.js"></script>
    <scriptsrc="https://d3js.org/d3-ease.v1.min.js"></script>
    <scriptsrc="https://d3js.org/d3-interpolate.v1.min.js"></script>
    <scriptsrc="https://d3js.org/d3-selection.v1.min.js"></script>
    <scriptsrc="https://d3js.org/d3-timer.v1.min.js"></script>
    <scriptsrc="https://d3js.org/d3-transition.v1.min.js"></script>
    <scriptsrc="https://d3js.org/d3-drag.v1.min.js"></script>
    <scriptsrc="https://d3js.org/d3-zoom.v1.min.js"></script>
    <script>var zoom =d3.zoom();</script>

    在浏览器中尝试d3-zoom。


    CAN  PAN  SVG  触摸  Canvas  输入  
    相关文章