成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

d3.js實(shí)現(xiàn)svg縮放功能

guqiu / 3403人閱讀

摘要：本文代碼轉(zhuǎn)載自，通過實(shí)現(xiàn)縮放很簡(jiǎn)單，但是滾輪和按鈕能夠完美縮放就不那么容易了，如果有對(duì)感興趣的小伙伴可以參考下面代碼。構(gòu)造一個(gè)新的縮放行為。指定當(dāng)前的縮放平移向量為如果未指定，返回當(dāng)前平移向量，默認(rèn)。

本文代碼轉(zhuǎn)載自Stack Overflow，通過d3.js實(shí)現(xiàn)縮放很簡(jiǎn)單，但是滾輪和按鈕能夠完美縮放就不那么容易了，如果有對(duì)d3感興趣的小伙伴可以參考下面代碼。

JSFiddle地址: Demo online

看本帖前最好掌握如下技術(shù)：

js/css 基本知識(shí)

d3.js 語(yǔ)法比較類似jquery

html5 svg 畫圖標(biāo)簽

d3.behavior.zoom()

該行為會(huì)自動(dòng)在容器元素中創(chuàng)建事件監(jiān)聽器來處理元素的縮放和平移動(dòng)作，可支持鼠標(biāo)事件和觸摸事件。
構(gòu)造一個(gè)新的縮放行為。構(gòu)造之后，可以通過selection.call()將此行為應(yīng)用于選擇器：

var zoom = d3.behavior.zoom();
selection.call(zoom);

所有注冊(cè)的監(jiān)聽器都使用 "zoom" 命名空間, 故如下可以移除縮放行為:

selection.on(".zoom", null);
zoom(selection)

應(yīng)用縮放行為到指定的選擇器 selection，注冊(cè)所需的事件監(jiān)聽器，支持縮放和拖拽行為。

zoom.translate([translate])

指定當(dāng)前的縮放平移向量為translate；如果未指定translate，返回當(dāng)前平移向量，默認(rèn)：[0, 0]。

zoom.scale([scale])

指定當(dāng)前的縮放比例，如果未指定scale，則返回當(dāng)前的縮放比例，默認(rèn)為1

index.html



Zoom + Pan

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84870.html

相關(guān)文章

  • d3.js實(shí)現(xiàn)svg縮放功能

    摘要：本文代碼轉(zhuǎn)載自，通過實(shí)現(xiàn)縮放很簡(jiǎn)單，但是滾輪和按鈕能夠完美縮放就不那么容易了，如果有對(duì)感興趣的小伙伴可以參考下面代碼。構(gòu)造一個(gè)新的縮放行為。指定當(dāng)前的縮放平移向量為如果未指定，返回當(dāng)前平移向量，默認(rèn)。 本文代碼轉(zhuǎn)載自Stack Overflow，通過d3.js實(shí)現(xiàn)縮放很簡(jiǎn)單，但是滾輪和按鈕能夠完美縮放就不那么容易了，如果有對(duì)d3感興趣的小伙伴可以參考下面代碼。 JSFiddle地址: ...

    劉玉平 評(píng)論0 收藏0

  • D3.js繪制實(shí)時(shí)映射的縮略圖

    摘要：在做可視化的很多時(shí)候，我們需要在主圖的一角設(shè)置一個(gè)縮略圖來掌握全局情況。，縮略圖的繪制完成，很簡(jiǎn)單的例子，按照這個(gè)思路可以完成大部分可視化的縮略圖繪制。 在做可視化的很多時(shí)候，我們需要在主圖的一角設(shè)置一個(gè)縮略圖來掌握全局情況。本次將使用力導(dǎo)向圖作為例子，完成縮略圖的實(shí)現(xiàn)。 繪制的原理就是依靠主圖的數(shù)據(jù)再畫一個(gè)圖出來，無需再次計(jì)算，只改變圖形形態(tài)。 最終效果 主圖節(jié)點(diǎn)拖動(dòng)，縮略圖跟著變化...

    miqt 評(píng)論0 收藏0

  • d3.js制作蜂巢圖表帶動(dòng)畫效果

    摘要：高斯模糊濾鏡創(chuàng)建添加模糊濾鏡添加輔助濾鏡添加模糊濾鏡添加輔助濾鏡重點(diǎn)說一下最后的，它的作用是把濾鏡效果和原圖混合起來。 showImg(https://segmentfault.com/img/bVbv2Eu); 以上是效果圖，本圖表使用d3.js v4制作。圖表主要功能是在六邊形格子中顯示數(shù)據(jù)，點(diǎn)擊底部圖標(biāo)可以切換指定格子高亮顯示，圖表可以隨瀏覽器任意縮放。 1.圖表的主體結(jié)構(gòu)是由...

    CarterLi 評(píng)論0 收藏0

  • D3.js實(shí)現(xiàn)拓?fù)鋱D

    摘要：最近寫項(xiàng)目需要畫出應(yīng)用程序調(diào)用鏈的網(wǎng)路拓?fù)鋱D，完全自己寫需要花費(fèi)些時(shí)間，那么首先想到的是但的自定義寫法寫起來非常麻煩，而且它的文檔都是基于配置說明的，對(duì)于自定義開發(fā)不太方便，嘗試后果斷放棄，改用，自己完全可控。 最近寫項(xiàng)目需要畫出應(yīng)用程序調(diào)用鏈的網(wǎng)路拓?fù)鋱D，完全自己寫需要花費(fèi)些時(shí)間，那么首先想到的是echarts,但echarts的自定義寫法寫起來非常麻煩，而且它的文檔都是基于配置說明...

    cooxer 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

guqiu

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<