<!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. pyplot文本显示

    pyplot文本显示 pyplot中文字符显示 pyplot默认不支持中文字符,因为默认字体是sans-serif,英文字体不能显示中文 方法1,修改需要输出中文字符的地方 在有中文输出的地方,添加属 ...

  2. Python基础语法题库

    引言: 语法练习包括Python基础语法.数据类型.字符编码和简单文件操作等内容. 正文(参考答案附录在题目下方): 1.Python 里用来告知解释器跳过当前循环中的剩余语句,然后继续进行下一轮循环 ...

  3. docker 入門

    http://dockone.io/article/277 我的碎碎念:Docker入门指南 [编者的话]之前曾经翻译过很多Docker入门介绍的文章,之所以再翻译这篇,是因为Anders的角度很独特 ...

  4. linux下的计算器

    (1)bc bc在默认的情况下是个交互式的指令.在bc工作环境下,可以使用以下计算符号:+ 加法 - 减法 * 乘法 / 除法 ^ 指数 % 余数如: 3+4;5*2;5^2;18/4      &l ...

  5. Easyui-datagrid显示时间的格式化代码

    {field: 'Time', title: '时间', formatter: function (value, row, index) { var date = new Date(value); v ...

  6. django的视图函数介绍

    我们来看下views视图中的函数的request这个变量到底有哪些方法和属性 1.request.path 结果:不包括域名和端口的url路径 2.request.method 结果:这次请求的方法, ...

  7. phpcms中调用外部网站数据

    1.在phpcms后台模块->模块管理->数据源->外部数据源 中 添加外部数据源 2.在phpcms前台模板中,使用get标签获取数据源中数据. {pc:get sql=" ...

  8. Bootstrap模态框使用WebUploader点击失效问题解决

    解决 方法一 在上传按钮上监听一个点击事件,如create(),在该函数中重新生成上传按钮 function create(){ uploader.addButton({ id: '#filePick ...

  9. iOS.ObjC.Basic-Knowledge

    1. ObjC的基础 2. ObjC2.0中的编译指令 3. ObjC Runtime 4. ObjC Object Model 5. ObjC的新语法 6. FQA 1. ObjC的基础 2. Ob ...

  10. Jmeter发送某个request时而成功，时而失败（处理办法：失败的时候尝试重新发送这个HTTP request）

    Jmeter发送某个request时而成功,时而失败 Maybe it’s Jmeter’s problem, after all, is not a commercial software. And ...