zoukankan      html  css  js  c++  java
  • D3.js 力导向图的拖拽(drag)与缩放(zoom)

    不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!)。天啊,简直不能接受如此丑X的效果。经过不懈的努力终于解决了这个问题。
    以下是事情发生的原因及解决的代码:
    var zoom = d3.behavior.zoom()  
                .scaleExtent([1, 10])  //缩放范围
                .on("zoom", zoomed);  
      
    function zoomed() {  
        container.attr("transform",    //此处的container是之前svg下 append('g')后返回的对象
            "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");  
    }  
    var container = svg.append("g")   //相当于缩放的容器
                       .call(zoom); 

    加入以上的代码后,缩放的功能是实现了。但是,拖动节点的时候 不再有力拉动的感觉 而是整个图的平移。(如下图)
     

     我们理想中的拖动效果不应该和缩放效果冲突,所以又去重新看了官网的例子
    猜测可能是
     

     这边定义的是缩放加整个的平移 所以拖动的时候 是整个力导向图的平移。

    根据官网的例子调整了下代码:
    定义drag时调用的方法:

     

     对应的方法:
     

    调用拖拽函数:

     

    更新后调用的示例:

     
  • 相关阅读:
    jQuery全选反选全不选
    Ubuntu安装VMware Workstation8.0.3
    ubuntu安装的软件如何启动
    ubuntu装VirtualBox遇到的问题
    你是优秀的PHP程序员吗?
    VMWare 三种工作模式(bridged、hostonly、NAT)
    最近要做的事
    090224
    2月23日 月曜日
    周五 26日
  • 原文地址:https://www.cnblogs.com/smedas/p/12484655.html
Copyright © 2011-2022 走看看