<!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. 基元线程同步构造之waithandle中 waitone使用

    在使用基元线程同步构造中waithandle中waitone方法的讲解: 调用waithandle的waitone方法阻止当前线程(提前是其状态为Nonsignaled,即红灯),直到当前的 Wait ...

  2. 吴裕雄 数据挖掘与分析案例实战（8）——Logistic回归分类模型

    import numpy as npimport pandas as pdimport matplotlib.pyplot as plt # 自定义绘制ks曲线的函数def plot_ks(y_tes ...

  3. sublimetext 2 编译文件带input时 提示 EOFError: EOF when reading a line

    昨天在网下下载了个什么sublimetxt 2 的破解版,然后让我折腾了半天,没错 ,就是因为这个 EOFError: EOF when reading a line错误让我搞的半死.怨自己,贪图中文 ...

  4. 5.Longest Palindromic Substring (String; DP, KMP)

    Given a string S, find the longest palindromic substring in S. You may assume that the maximum lengt ...

  5. 各种replace待续

    http://blog.163.com/chenjie_8392/blog/static/439339842010513128139/

  6. 源码安装php时出现configure: error: xml2-config not found. Please check your libxml2 installation

    1.检查是否安装了libxml 包 > rpm -qa|grep libxml2 2.如果没有则安装 > yum install libxml2 > yum install libx ...

  7. WebApi是轻量级的,WCF是重量级的，可以Api调用WCF,更灵活

    WCF.WebAPI.WCFREST.WebService之间的区别 注明:转载 在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在 ...

  8. PAT 1074 宇宙无敌加法器（20）（代码+思路+测试点分析）

    1074 宇宙无敌加法器(20 分)提问 地球人习惯使用十进制数,并且默认一个数字的每一位都是十进制的.而在 PAT 星人开挂的世界里,每个数字的每一位都是不同进制的,这种神奇的数字称为"P ...

  9. BZOJ1222 [HNOI2001]产品加工 - 动态规划- 背包

    题解 怎么看都不像是个背包,直到我看了题解→_→, 第一次碰到这么奇怪的背包= = 定一个滚动数组$F_i$, $i$表示机器$a$用了$i$的时间, $F_i$表示机器$b$用了$F_i$的时间, ...

  10. nfs文件系统在linux下挂载不上的解决办法

      标签: mount nfs export 2014年08月07日 18:46:247472人阅读 评论(0) 收藏 举报  分类: 文件系统(10)  版权声明:本文为博主原创文章,未经博主允许 ...