快捷導(dǎo)航

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)動(dòng)
本文給大家反映的是javascript實(shí)現(xiàn)的簡單的省市區(qū)三級聯(lián)動(dòng)特效，不需要訪問后臺服務(wù)器端，不使用Ajax，無刷新，純JS實(shí)現(xiàn)的省市區(qū)三級聯(lián)動(dòng)。當(dāng)省市區(qū)數(shù)據(jù)變動(dòng)是只需調(diào)正js即可。
2015-05-05
基于JS實(shí)現(xiàn)01支付后的10秒倒計(jì)時(shí)
這是一個(gè)通過js實(shí)現(xiàn)的支付后的頁面，點(diǎn)擊支付會(huì)跳出一個(gè)彈窗，提示你是否要確定支付，確定后進(jìn)入付后界面，該頁面有著10秒倒計(jì)時(shí)，計(jì)時(shí)結(jié)束后便會(huì)返回原界面，也可以選擇立刻返回，來返回主頁面，這篇文章主要介紹了基于JS實(shí)現(xiàn)01支付后的10秒倒計(jì)時(shí),需要的朋友可以參考下
2023-03-03
淺談javascript屬性onresize
這篇文章主要介紹了淺談javascript屬性onresize的詳細(xì)使用方法，十分的實(shí)用，這里推薦給大家，有需要的小伙伴可以參考下。
2015-04-04
重新理解JavaScript的六種繼承方式
通過本文帶領(lǐng)大家一起重新理解JavaScript的六種繼承方式,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03
使用JavaScript優(yōu)雅實(shí)現(xiàn)文本展開收起功能
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript優(yōu)雅實(shí)現(xiàn)文本展開收起功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-04-04
讓textarea自動(dòng)調(diào)整大小的js代碼
讓textarea自動(dòng)調(diào)整大小的js代碼，需要的朋友可以參考下。
2011-04-04
js調(diào)試系列初識控制臺
這篇文章的目的只是讓你認(rèn)識控制臺，讓你入門調(diào)試js，之后的路還得靠你們自己走
2014-06-06
這篇文章主要介紹了js實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)游戲的方法,實(shí)例分析了javascript基于數(shù)組、隨機(jī)數(shù)等實(shí)現(xiàn)抽獎(jiǎng)游戲的技巧,需要的朋友可以參考下
2015-06-06