d3.js實(shí)現(xiàn)圖形拖拽的示例分析

這篇文章主要介紹了d3.js實(shí)現(xiàn)圖形拖拽的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)網(wǎng)站建設(shè)提供從項(xiàng)目策劃、軟件開發(fā)，軟件安全維護(hù)、網(wǎng)站優(yōu)化(SEO)、網(wǎng)站分析、效果評估等整套的建站服務(wù)，主營業(yè)務(wù)為網(wǎng)站制作、成都做網(wǎng)站，App定制開發(fā)以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。創(chuàng)新互聯(lián)深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

具體內(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>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“d3.js實(shí)現(xiàn)圖形拖拽的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

文章標(biāo)題：d3.js實(shí)現(xiàn)圖形拖拽的示例分析
轉(zhuǎn)載來源：http://www.muchs.cn/article26/jpcccg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、全網(wǎng)營銷推廣、自適應(yīng)網(wǎng)站、品牌網(wǎng)站建設(shè)、用戶體驗(yàn)、網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容