d3.js實現圖形拖拽
更新時間：2019年12月19日 14:33:32 作者：AryaoO
這篇文章主要為大家詳細介紹了d3.js實現圖形拖拽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了d3.js圖形拖拽的具體代碼，供大家參考，具體內容如下
<!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()
//定義拖拽函數
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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JS數組進階,結合實例形式總結分析了數組的幾種常見函數基本用法,涉及JavaScript數組元素刪除、拼接、添加、倒序排列等相關操作技巧,需要的朋友可以參考下2020-01-01
本文給大家反映的是javascript實現的簡單的省市區(qū)三級聯動特效，不需要訪問后臺服務器端，不使用Ajax，無刷新，純JS實現的省市區(qū)三級聯動。當省市區(qū)數據變動是只需調正js即可。2015-05-05
這是一個通過js實現的支付后的頁面，點擊支付會跳出一個彈窗，提示你是否要確定支付，確定后進入付后界面，該頁面有著10秒倒計時，計時結束后便會返回原界面，也可以選擇立刻返回，來返回主頁面，這篇文章主要介紹了基于JS實現01支付后的10秒倒計時,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了淺談javascript屬性onresize的詳細使用方法，十分的實用，這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
通過本文帶領大家一起重新理解JavaScript的六種繼承方式,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細介紹了如何使用JavaScript優(yōu)雅實現文本展開收起功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-04-04
讓textarea自動調整大小的js代碼，需要的朋友可以參考下。2011-04-04
這篇文章的目的只是讓你認識控制臺，讓你入門調試js，之后的路還得靠你們自己走2014-06-06
這篇文章主要介紹了js實現大轉盤抽獎游戲的方法,實例分析了javascript基于數組、隨機數等實現抽獎游戲的技巧,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細介紹了JavaScript實現驗證碼案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10