美文网首页
d3.zoom()拖动时抖动

d3.zoom()拖动时抖动

作者: secViz | 来源:发表于2018-10-25 23:47 被阅读0次

用tree布局绘制了一个树图,但是在拖动时出现了抖动问题。
老代码:

    this.svg.call(
         d3.zoom()
        .scaleExtent([0.1, 3])
        .on('zoom', () => {
          this.svg.attr('transform', d3.event.transform);
        })
    );

google之后找到了问题的原因和解决方案,可参考下面2篇文章:
drag-zoom-smoother
understanding zoom behavior bindings

新代码:

    this.g = this.svg.append('g');
    this.svg.call(
      d3.zoom()
        .scaleExtent([0.1, 3])
        .on('zoom', () => {
          this.g.attr('transform', d3.event.transform);
        })
    );

相关文章

  • d3.zoom()拖动时抖动

    用tree布局绘制了一个树图,但是在拖动时出现了抖动问题。老代码: google之后找到了问题的原因和解决方案,可...

  • js的拖动相关

    拖动相关的事件 dragstart: 被拖动元素 开始拖动 时触发的事件。 drag: 被拖动元素 拖动过程 触发...

  • Javascript知识整理——拖放

    拖放事件 拖动某元素时,将依次触发下列事件(被拖动元素): dragstart按下鼠标并开始移动鼠标时在被拖动元素...

  • 第八章 d3拖拽和事件及缩放

    简单的拖拽举例 drag.container(svg) //设置拖拽事件的相对父元素 事件 缩放d3.zoom()...

  • Axure如何实现下拉刷新的效果?

    思路如下 1、拖动,显示箭头朝下的图标,文字提示“下拉刷新”; 2、继续拖动,当拖动高度>=60时,显示箭头朝上的...

  • 开车时感觉抖是怎么回事?

    开车时有时会感觉汽车抖动,那是怎么回事呢、 汽车抖动分为怠速抖动和行驶抖动。 1、如果怠速时抖动呢,就要检查你的发...

  • js drag & drop实现拖拽

    1.先在元素上添加属性 ,定义了这个属性后就可以注册拖动的事件了 2.拖动事件: 开始拖动时dragsta...

  • JS的ondrag事件(拖拽效果)

    draggable: html元素属性,设置为true时,表示该元素可以进行拖动。 拖动事件: 1.dragsta...

  • Axure RP 9 教程—页面三级拖动

    效果图 本期效果: 本期效果是一个三级拖动,第一次点击弹出部分列表,向上拖动时显示完整的列表,向下拖动时显示最低级...

  • 服务发布时网络“抖动”

    抛出问题 服务部署后的一段时间经常会遇见接口的调用超时。这种问题在流量稍大的时候很容易遇见,曾经做过的一个服务,整...

网友评论

      本文标题:d3.zoom()拖动时抖动

      本文链接:https://www.haomeiwen.com/subject/oiyhtqtx.html