d3.js實現svg縮放功能

劉玉平發布于2019-08-01 17:29 / 1526人閱讀

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

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

JSFiddle地址: Demo online

看本帖前最好掌握如下技術：

js/css 基本知識

d3.js 語法比較類似jquery

html5 svg 畫圖標簽

d3.behavior.zoom()

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

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

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

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

zoom(selection)

應用縮放行為到指定的選擇器 selection，注冊所需的事件監聽器，支持縮放和拖拽行為。

zoom.translate([translate])

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

zoom.scale([scale])

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

index.html



Zoom + Pan

GPU云服務器云服務器圖片縮放功能 html5縮放功能 d3.js d3.js 視頻

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51170.html

d3.js實現svg縮放功能

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

guqiu 2019-08-20 18:55 評論0 收藏0
D3.js繪制實時映射的縮略圖

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

miqt 2019-08-21 16:47 評論0 收藏0
d3.js制作蜂巢圖表帶動畫效果

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

CarterLi 2019-08-26 10:36 評論0 收藏0
D3.js實現拓撲圖

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

cooxer 2019-08-22 18:25 評論0 收藏0