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