<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>d3</title>

</head>

<body>

  <div class="test">

  </div>

  <script src="../js/jquery-2.1.4.js"></script>

  <script src="../js/d3.js"></script>

  <script>

  $(function(){

    var dragmove = function(d){

      d3.select(this)

        .attr({

          cx: function(){

            d.x = Math.max(20, Math.min(220, d3.event.x));

            return d.x;

          },

          cy: function(){

            d.y = Math.max(20, Math.min(105, d3.event.y));

            return d.y;

          }

        })

    }

    var drag = d3.behavior.drag()

                          .origin(function(d){

                            return d;

                          })

                          .on('drag', dragmove);

                          ;

    var svg = d3.select('.test')

                .selectAll('svg')

                .data([{

                  x: 120,

                  y: 62

                }])

                .enter()

                .append('svg')

                .attr('width', 240)

                .attr('height', 125)

                ;

    svg.append('circle')

       .attr({

        r: 20,

        cx: function(d) {

          return d.x;

        },

        cy: function(d){

          return d.y

        }

       })

       .call(drag)

       ;

  })

  </script>

</body>

</html>

　

　

D3 drag的更多相关文章

  1. D3.js 力导向图

    花了大半天看了一个八十几行的代码..心累 力导向图是之前就有画过很多次的东西,但是这次的代码看上去很陌生,然后发现是D3更新了4.0.... 先贴代码 var svg = d3.select(&quo ...

  2. svg操纵方案 基于 D3 还是 angular？

    之前还是想简单了, 现在重新写这篇.把逻辑拆分粒度的辨析,放到外面去. 问题提出:svg控制方案 基于 D3 还是 angular 根据这个,html 4种展现样式:普通的html,svg,2D ca ...

  3. D3.js 入门学习(二) V4的改动

    //d3.scan /* 新的d3.scan方法对数组进行线性扫描,并根据指定的比较函数返回至少一个元素的索引. 这个方法有点类似于d3.min和d3.max. 而d3.scan可以得到极值的索引而不 ...

  4. d3代码如何改造成update结构（恰当处理enter和exit）

    d3的enter和exit 网上有很多blog讲解.说的还凑合的见:https://blog.csdn.net/nicolecc/article/details/50786661 如何把自己的rude ...

  5. [D3] Add hovercard

    The way to add hovercard is Append a div with class 'hovercard' in the tick function, positioning th ...

  6. [D3] Add image to the node

    We can create node with 'g' container, then append 'image' to the nodes. // Create container for the ...

  7. [D3] Drawing path in D3

    Here we have a force layout with three nodes. In the example, we will link three nodes with line and ...

  8. [D3] Creating a D3 Force Layout in React

    Learn how to leverage d3's layout module to create a Force Layout inside of React. We'll take a look ...

  9. d3.js V5版本在vue里使用 自定义节点图片

    var width = this.$refs.topInfo.offsetWidth; var height = this.$refs.topInfo.offsetHeight; var img_w ...

随机推荐

  1. linux基础命令：

    linux基础命令: 显示 echo 输出我写的内容 ls 查看当前目录的文件 pwd 查看当前目录 ifconfig 查看网卡信息 grep 过滤 -v 取反 -n man 查看命令的帮助信息 md ...

  2. chrome 调试跨域iframe

    相关链接:https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome https://stacko ...

  3. EnumMap实现类

    从名字上看出来,EnumMap是为枚举类服务的,它的key不能为null,在创建它的时候,必须要指定一个枚举类,如: EnumMap enumMap = new EnumMap(Season.clas ...

  4. 每月IT摘录201808--201809

    一.技术 海量数据的解决方案: 使用缓存: 页面静态化技术: 数据库优化: 分离数据库中活跃的数据: 批量读取和延迟修改: 读写分离: 使用NoSQL和Hadoop等技术: 分布式部署数据库: 应用服 ...

  5. JS中如何处理多个ajax并发请求？

    js中的多并发处理. 通常 为了减少页面加载时间,先把核心内容显示处理,页面加载完成后再发送ajax请求获取其他数据 这时就可能产生多个ajax请求,为了用户体验,最好是发送并行请求,这就产生了并发问 ...

  6. centos 系统下查看时间时区以及修改

    1.系统时间查看及修改: Centos 6 查看系统时间:# date

  7. spark开启远程调试

    一.集群环境配置 #调试Master,在master节点的spark-env.sh中添加SPARK_MASTER_OPTS变量 export SPARK_MASTER_OPTS="-Xdeb ...

  8. ECMAScript5之JSON对象属性的遍历顺序

    测试浏览器 Chrome.Safari 一 键可以用parseInt解析成整数的,按数值升序顺序. var intObj = { '3.3' : 3.3, '2' : 222, '1' :111 } ...

  9. 【校招面试 之 C/C++】第6题 C++深拷贝与浅拷贝

    1.两个的区别(1)在未定义显示拷贝构造函数的情况下,系统会调用默认的拷贝函数——即浅拷贝,它能够完成成员的一一复制.当数据成员中没有指针时,浅拷贝是可行的: 但当数据成员中有指针时,如果采用简单的浅 ...

  10. BZOJ 1211[HNOI2004]树的计数 - prufer数列

    描述 一个有n个结点的树,设它的结点分别为v1, v2, …, vn,已知第i个结点vi的度数为di,问满足这样的条件的不同的树有多少棵.给定n,d1, d2, …, dn,编程需要输出满足d(vi) ...