d3.js實(shí)現(xiàn)圖形拖拽
更新時(shí)間：2019年12月19日 14:33:32 作者：AryaoO
這篇文章主要為大家詳細(xì)介紹了d3.js實(shí)現(xiàn)圖形拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了d3.js圖形拖拽的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽操作</title>
</head>
<body>
<script src = "d3.js"></script>
<script>
var width =2000,
height = 2000;
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height)
var color = d3.scale.category20()
//定義拖拽函數(shù)
var drag = d3.behavior.drag()
.on("drag",dragmove)
function dragmove(d){
d3.select(this)
.attr("cx", d.cx = d3.event.x)
.attr("cy", d.cy = d3.event.y)
}
//繪制圓形
var circles =[{cx:150,cy:200,r:30},
{cx:250,cy:200,r:30}]
svg.selectAll("circle")
.data(circles)
.enter()
.append("circle")
.attr("cx",function(d){return d.cx})
.attr("cy",function(d){return d.cy})
.attr("r", function (d) {
return d.r
})
.attr("fill",color)
.call(drag)
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS數(shù)組進(jìn)階示例【數(shù)組的幾種函數(shù)用法】
這篇文章主要介紹了JS數(shù)組進(jìn)階,結(jié)合實(shí)例形式總結(jié)分析了數(shù)組的幾種常見函數(shù)基本用法,涉及JavaScript數(shù)組元素刪除、拼接、添加、倒序排列等相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
javascript實(shí)現(xiàn)簡單的省市區(qū)三級聯(lián)動
本文給大家反映的是javascript實(shí)現(xiàn)的簡單的省市區(qū)三級聯(lián)動特效，不需要訪問后臺服務(wù)器端，不使用Ajax，無刷新，純JS實(shí)現(xiàn)的省市區(qū)三級聯(lián)動。當(dāng)省市區(qū)數(shù)據(jù)變動是只需調(diào)正js即可。2015-05-05
基于JS實(shí)現(xiàn)01支付后的10秒倒計(jì)時(shí)
這是一個(gè)通過js實(shí)現(xiàn)的支付后的頁面，點(diǎn)擊支付會跳出一個(gè)彈窗，提示你是否要確定支付，確定后進(jìn)入付后界面，該頁面有著10秒倒計(jì)時(shí)，計(jì)時(shí)結(jié)束后便會返回原界面，也可以選擇立刻返回，來返回主頁面，這篇文章主要介紹了基于JS實(shí)現(xiàn)01支付后的10秒倒計(jì)時(shí),需要的朋友可以參考下2023-03-03
這篇文章主要介紹了淺談javascript屬性onresize的詳細(xì)使用方法，十分的實(shí)用，這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
通過本文帶領(lǐng)大家一起重新理解JavaScript的六種繼承方式,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
使用JavaScript優(yōu)雅實(shí)現(xiàn)文本展開收起功能
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript優(yōu)雅實(shí)現(xiàn)文本展開收起功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
讓textarea自動調(diào)整大小的js代碼，需要的朋友可以參考下。2011-04-04
這篇文章的目的只是讓你認(rèn)識控制臺，讓你入門調(diào)試js，之后的路還得靠你們自己走2014-06-06
JavaScript實(shí)現(xiàn)驗(yàn)證碼案例
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)驗(yàn)證碼案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10