<!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. 正则表达式在JS中的使用

    <script type="text/javascript"> /** *正则表达式在js中的第一种使用方式: * RegExp 通过构造器去使用正则表达式 需要对反斜 ...

  2. SPARK数据类型

    转自: http://www.cnblogs.com/tuitui1989/p/5331113.html 一.本地向量 有如下几个类: Vector(基类),DenseVector,SparseVec ...

  3. nfs只能挂载为nobody的解决方法

    不得不承认centos6较centos5发生了很大的变化,在新部署的centos 6.4上又遇到nfs挂载的问题.问题现象是,在配置完nfs后,无论配置里指定的是何用户,挂载成功后显示的只能是nobo ...

  4. [leetcode]346. Moving Average from Data Stream滑动窗口平均值

    Given a stream of integers and a window size, calculate the moving average of all integers in the sl ...

  5. Ubuntu-18.04Python2与Python3自由切换

    一.配置ssh链接 安装openssh-server devops@devops-virtual-machine:~$ sudo apt-get install openssh-server 二.安装 ...

  6. 7-将本地的javaweb项目部署到Linux服务器的一般操作

    一.基本流程介绍: 1.安装tomcat;2.安装mysql;3.将本地的javaweb导出成.war文件,传到服务器的tomcat/webapps/下面4.将数据库文件导出成.sql文件,传到服务器 ...

  7. VINS-mono详细解读

    VINS-mono详细解读 极品巧克力 前言 Vins-mono是香港科技大学开源的一个VIO算法,https://github.com/HKUST-Aerial-Robotics/VINS-Mono ...

  8. EXP-00056：遇到oracle错误12154

    执行命令如下: 引用 exp user/pwd@dbname file=d:text.dmp owner=(user) 碰到了错误: 引用 EXP-00056:遇到oracle错误12154 ORA- ...

  9. WCF生成客户端代理对象的两种方法的解释

    最近在封装WCF,有一些很好的实践就记录下来,大家可以放心使用,所有代码都已经调试过.如果有高手可以大家探讨一下. 在WCF中有两种不同的方法可以用于创建客户端服务对象,他们分别为: 1. 代理构造法 ...

  10. c3p0数据源配置

    Xml代码   <c3p0-config> <default-config> <!--当连接池中的连接耗尽的时候c3p0一次同时获取的连接数.Default: --> ...