d3.js實現(xiàn)圖形縮放平移
更新時間：2019年12月19日 12:04:18 作者：AryaoO
這篇文章主要為大家詳細介紹了d3.js實現(xiàn)圖形縮放平移效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了d3.js實現(xià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 = 400,
height = 400;
var circles =[{cx:150,cy:200,r:30},
{cx:250,cy:200,r:30}]
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height)
//定義縮放函數(shù)
var zoom = d3.behavior.zoom()
.scaleExtent([1,10])//用于設置最小和最大的縮放比例
.on("zoom",zoomed)
//繪制
var g = svg.append("g")
.call(zoom)
g.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","black")
function zoomed(){
g.attr("transform","translate("+d3.event.translate+")scale("+d3.event.scale+")")
} //d3.event.translate 是平移的坐標值，d3.event.scale 是縮放的值。
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
addeventlistener監(jiān)聽scroll跟touch(實例講解)
下面小編就為大家?guī)硪黄猘ddeventlistener監(jiān)聽scroll跟touch(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
?JavaScript+HarmonyOS?實現(xiàn)一個手繪板
這篇文章主要介紹了?JavaScript+HarmonyOS?實現(xiàn)一個手繪板，利用openHarmony內(nèi)置的API?cnavas組件實現(xiàn)，具體詳細內(nèi)容需要的小伙伴可以參考一下2022-07-07
一個很棒的 blog 文章，是 PPK 兩年前寫的，文章中解釋了 contains() 和 compareDocumentPosition() 方法運行在他們各自的瀏覽器上。從那起，我已經(jīng)對這些方法做了大量的研究，并且已經(jīng)在很多場合使用他們。在很多任務中，他們被證明是非常有用的（特別關(guān)于結(jié)構(gòu)的抽象 DOM 選擇器）。2008-04-04
javascript forEach通用循環(huán)遍歷方法
循環(huán)遍歷一個元素是開發(fā)中最常見的需求之一，那么讓我們來看一個由框架BASE2和Jquery的結(jié)合版本吧.2010-10-10
js中Array.sort()方法是用來對數(shù)組項進行排序的,默認是升序排列sort() 方法可以接受一個 方法為參數(shù)，這個方法有兩個參數(shù)，接下來本例將對sort方法進行深入探討，感興趣的朋友可以參考下2013-02-02
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)簡單計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
JavaScript函數(shù)執(zhí)行、作用域鏈以及內(nèi)存管理詳解
這篇文章主要介紹了JavaScript函數(shù)執(zhí)行、作用域鏈以及內(nèi)存管理的知識，文章內(nèi)容非常詳細,對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
JavaScrip數(shù)組刪除特定元素的幾種方法總結(jié)
從js數(shù)組中刪除指定元素是我們每個人都遇到的問題，網(wǎng)上這方面的資料也很多，但有的時間過于久遠，有的內(nèi)容不夠全面，所以自己來整理下，這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScrip數(shù)組刪除特定元素的多種方法，需要的朋友可以參考下。2017-09-09
這篇文章主要介紹了超輕量級的js時間庫miment使用解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
JavaScript中的toString()和toLocaleString()方法的區(qū)別
本文給大家介紹JavaScript中的toString()和toLocaleString()方法的區(qū)別,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02