<!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. 常见jsp跳转总结

    这次做项目,用到几种不同的JSP跳转的方式,在此总结5中常用方法. 常用的跳转方式有以下几种: (1)href超链接标记,属于客户端跳转 (2)使用javascript完成,属于客户端跳转 (3)提交 ...

  2. 逻辑斯蒂回归VS决策树VS随机森林

    LR 与SVM 不同 1.logistic regression适合需要得到一个分类概率的场景,SVM则没有分类概率 2.LR其实同样可以使用kernel,但是LR没有support vector在计 ...

  3. VMware-克隆机，网卡修改

    1.克隆 2.修改网卡eth1为eth0 -persistent-net.rules 3.配置ip vim /etc/sysconfig/network-scripts/ifcfg-etho 4.修改 ...

  4. 域名相关：DNS A记录 NS记录 MX记录 CNAME记录

    1. DNSDNS:Domain Name System 域名管理系统 域名是由圆点分开一串单词或缩写组成的,每一个域名都对应一个惟一的IP地址,这一命名的方法或这样管理域名的系统叫做域名管理系统.D ...

  5. C#aspx页面前台使用<%=%>无法取到后台的值

    检查是不是有拼接问题,正常public和protected修饰的字段或属性均可使用<%=%>.另外,加载(Page_Load)时有没有给它们赋初始值? 答 1)前台页面只能调用本后置代码的 ...

  6. dreamwave基础

    WEBcs架构需要在客户段安装程序, 需要安装程序, 工作量会比较大, 需要安装和维护, 比如以后系统升级, 会很麻烦. 优点是一些业务逻辑可以在客户端, 可以减少服务器的一些压力, 客户端的界面操作 ...

  7. ThreadPoolExecutor的execute源码分析

    上一篇文章指出,ThreadPoolExecutor执行的步骤如下: 向线程池中添加任务,当任务数量少于corePoolSize时,会自动创建thead来处理这些任务: 当添加任务数大于corePoo ...

  8. 【vs2010】转换到 COFF 期间失败: 文件无效或损坏

    不知怎么本来编译好好的VS2010环境,忽然出现“转换到COFF 期间失败:文件无效或损坏”的链接错误.花了好多天,试了好多方法,最终解决了这个问题. 现在罗列一下这几种解决方案: 方案1:      ...

  9. [udemy]WebDevelopment_How the Internet Works

    Browsing the web Enter google.com, who is this google.com This question gets asked all the way down ...

  10. [leetcode]403. Frog Jump青蛙过河

    A frog is crossing a river. The river is divided into x units and at each unit there may or may not ...