D3 drag
<!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的更多相关文章
- D3.js 力导向图
花了大半天看了一个八十几行的代码..心累 力导向图是之前就有画过很多次的东西,但是这次的代码看上去很陌生,然后发现是D3更新了4.0.... 先贴代码 var svg = d3.select(&quo ...
- svg操纵方案 基于 D3 还是 angular?
之前还是想简单了, 现在重新写这篇.把逻辑拆分粒度的辨析,放到外面去. 问题提出:svg控制方案 基于 D3 还是 angular 根据这个,html 4种展现样式:普通的html,svg,2D ca ...
- D3.js 入门学习(二) V4的改动
//d3.scan /* 新的d3.scan方法对数组进行线性扫描,并根据指定的比较函数返回至少一个元素的索引. 这个方法有点类似于d3.min和d3.max. 而d3.scan可以得到极值的索引而不 ...
- d3代码如何改造成update结构(恰当处理enter和exit)
d3的enter和exit 网上有很多blog讲解.说的还凑合的见:https://blog.csdn.net/nicolecc/article/details/50786661 如何把自己的rude ...
- [D3] Add hovercard
The way to add hovercard is Append a div with class 'hovercard' in the tick function, positioning th ...
- [D3] Add image to the node
We can create node with 'g' container, then append 'image' to the nodes. // Create container for the ...
- [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 ...
- [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 ...
- d3.js V5版本在vue里使用 自定义节点图片
var width = this.$refs.topInfo.offsetWidth; var height = this.$refs.topInfo.offsetHeight; var img_w ...
随机推荐
- Elon Musk
人物事件 成长学习 年6月28日,埃隆·马斯克在南非的比勒陀利亚出生,他的 埃隆·马斯克 父亲是一名南非机电工程师,母亲是加拿大人,从事营养师兼模特.[8] 年,10岁的马斯克就拥有了自己的第一台电 ...
- LeetCode关于数组中求和的题型
15. 3Sum:三数之和为0的组合 Given an array S of n integers, are there elements a, b, c in S such that a + b + ...
- git 使用 添加分支
http://jingyan.baidu.com/album/19192ad83ea879e53e5707ce.html?picindex=1 修改配置 git config --global use ...
- cmd 命令相关
计算相关进程数: tasklist|find /i "cmd.exe" 安装git的可以 tasklist|find /i "cmd.exe" | wc -l
- WebDriverException:Element is not clickable at point - selenium执行过程中遇到的相关报错
Element is not clickable at point (x, y) 这段可以忽略:本文来自 https://www.cnblogs.com/lozz/p/9947430.html 引起这 ...
- hdoj1087 (DP--LIS)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1087 思路:这题很简单了,纯LIS的解法,没有一点变形,由于数据小,使用O(n^2)LIS解法就足够了 ...
- 给乱序的链表排序 · Sort List, 链表重排reorder list LoLn...
链表排序 · Sort List [抄题]: [思维问题]: [一句话思路]: [输入量]:空: 正常情况:特大:特小:程序里处理到的特殊情况:异常情况(不合法不合理的输入): [画图]: quick ...
- TextView 小技巧
1.TextView的单行显示 最后空间不够的画变为省略号显示 textView中让结尾变为省略号android:ellipsize = "end" 省略号在结尾tv.setEll ...
- win10系统打开自带的画图软件的步骤
1.win+R打开输入系统命令的输入框 2.输入mspaint即可打开电脑自带的画图软件.
- SqlDataHelper
using System;using System.Data;using System.Configuration;using System.Linq;using System.Web;using S ...