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

資訊專欄INFORMATION COLUMN

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

劉玉平 / 1554人閱讀

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

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

JSFiddle地址: Demo online

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

js/css 基本知識

d3.js 語法比較類似jquery

html5 svg 畫圖標簽

d3.behavior.zoom()

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

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

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

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

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

zoom.translate([translate])

指定當前的縮放平移向量為translate；如果未指定translate，返回當前平移向量，默認：[0, 0]。

zoom.scale([scale])

指定當前的縮放比例，如果未指定scale，則返回當前的縮放比例，默認為1

index.html



Zoom + Pan

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

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

相關(guān)文章

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

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

    guqiu 評論0 收藏0

  • D3.js繪制實時映射的縮略圖

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

    miqt 評論0 收藏0

  • d3.js制作蜂巢圖表帶動畫效果

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

    CarterLi 評論0 收藏0

  • D3.js實現(xiàn)拓撲圖

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

    cooxer 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<