D3.js的一些基礎部分

来源:https://www.cnblogs.com/littleSpill/archive/2019/04/23/10757184.html
-Advertisement-
Play Games

最近公司有需求要做一些可視化的功能。之前一直都是用Echarts做的，但是Echarts現在滿足不了我們的需求，經過多方請教，查找發現只有D3可以滿足我們的需求，而且可以完美的適用到react框架中。第一次接觸到D3，發現這些圖標的可交互性非常豐富，而且動畫流暢簡潔。 所以，打算學習D3並且應用到項 ...


最近公司有需求要做一些可視化的功能。之前一直都是用Echarts做的，但是Echarts現在滿足不了我們的需求，經過多方請教，查找發現只有D3可以滿足我們的需求，而且可以完美的適用到react框架中。第一次接觸到D3，發現這些圖標的可交互性非常豐富，而且動畫流暢簡潔。 所以，打算學習D3並且應用到項目中。 原本以為D3也會和其他可視化庫類似，只需要找到與自己需要的圖表類似的圖表進行粘貼，複製。然後簡單的修改數據或者參數就可以達到自己使用的目的，結果總是差強人意....

 

 

 

從最基礎圖形學起 ： 一、矩形

矩形又分為直角矩形和圓角矩形

代碼 :  

 1 矩形的參數共6個
 2             x : 矩形左上角的x坐標。
 3             y : 矩形左上角的y坐標。
 4             width : 矩形的寬度。
 5             height : 矩形的高度。
 6             rx : 對於圓角矩形，指定橢圓在x方向的半徑。
 7             ry : 對於圓角矩形，指定橢圓在y方向的半徑。
 8             fill : 填充色 改變文字<text>的顏色也用這個。
 9             storke ： 輪廓線的顏色。
10             stroke-width : 輪廓線的寬度。
11             opacity ： 透明度
12 
13         <!-- 直角矩形 -->
14         <svg width="300" height="200" version="1.1">
15             <rect x="20" y="20" width="200" height="100"
16                 style="fill:steelblue;stroke:blue;stroke-width: 4;opacity: 0.4" />
17         </svg>
18 
19 
20         <!-- 圓角矩形 -->
21         <svg width="300" height="200">
22             <rect x="20" y="20" width="200" rx="20" ry="30" height="100"
23                 style="fill:yellow;stroke:black;stroke-width:4;opacity:0.5" />
24         </svg>

顯示的效果  :

 二、圓形和橢圓形

代碼 ： 

 1  圓形的參數有3個 :
 2         cx : 圓形的x坐標。
 3         cy : 圓形的y坐標。
 4         r : 圓的半徑。
 5     橢圓的參數與圓形類似，只是半徑分為水平半徑和垂直半徑 :
 6         cx : 圓形的x坐標。
 7         cy : 圓形的y坐標。
 8         rx : 橢圓的水平半徑。
 9         ry : 橢圓的垂直半徑。
10 
11     <!-- 圓形 -->
12     <svg width="300" height="200">
13         <circle cx="150" cy="100" r="60" 
14             style="fill:yellow;stroke:black;stroke-width:4" />
15     </svg>
16     <!-- 橢圓形 -->
17     <svg width="300" height="200">
18         <ellipse cx="100" cy="100" rx="90" ry="50" 
19             style="fill:blue;stroke:black;stroke-width:4" />
20     </svg>

 

效果 : 

 

 三、線段

代碼 ： 

 1  線段的參數是起點坐標和終點坐標 : 
 2         x1 : 起點的x坐標。
 3         y1 : 起點的y坐標。
 4         x2 : 終點的x坐標。
 5         y2 : 終點的y坐標。
 6 
 7     <!-- 線段 -->
 8     <svg width="300" height="200">
 9         <line x1="20" y1="20" x2="170" y2="120" 
10             style="stroke:black;stroke-width:4" />
11     </svg>

 

 效果 : 

 四、多邊形和折線

多邊形和折線的參數是一樣的，都只有一個points參數，這個參數的值是一系列的點坐標的。不同之處是多邊形會將終點和起點連接起來，而折線不連接。

代碼 : 

 1 <!-- 多邊形 -->
 2     <svg width="300" height="200">
 3         <polygon points="150,20 80,80 110,160 190,160 220,80" 
 4             style="fill:yellow;stroke:black;stroke-width:4" />
 5     </svg>
 6     
 7     <!-- 折線 -->
 8     <svg width="300" height="200">
 9         <polyline points="150,20 80,80 110,160 190,160 220,80" 
10             style="fill:white;stroke:blue;stroke-width:4"/>
11     </svg>

 

效果 ： 

 五、路徑

<path>標簽的功能最豐富，前面列舉的圖形都可以用路徑製作出來。與折線類似，也是通過給出一系列點坐標來繪製。其用法是 : 給出一個坐標點，在坐標點前面添加一個英文字母，表示是如何運動到此坐標點的。英文字母按照功能可分為五類 : 

移動類  :

　　M : 等於moveto。將畫筆移動到指定坐標。

直線類 ：

　　L : 等於lineto。 畫直線到指定坐標。

　　H : 等於horizontal lineto 。 畫水平直線到指定坐標。

　　V : 等於vertical lineto 。 畫垂直直線到指定坐標。

曲線類 :

　　C : 等於curveto 。 畫三次貝塞爾曲線經兩個指定控制點到達終點坐標。

　　S : 等於shorthand/smooth surveto 。 與前一條三次貝塞爾曲線相連，第一個控制點為前一條曲線第二個控制點的對稱點，只需輸入第二個控制點和終點，即可繪製              一個三次貝塞爾曲線。

　　Q : 等於quadratic Bezier curveto 。 畫二次貝塞爾曲線經一個指定控制點到達終點坐標。

　　T : 等於Shorthand/smooth quadratic Bezier curveto 。 與前一條二次貝塞爾曲線相連，控制點為前一條二次貝塞爾曲線控制點的對稱點，只需輸入終點，即可繪製             一個二次貝塞爾曲線。

弧線類 : 

　　A : 等於elliptical arc 。 畫橢圓曲線到指定坐標。

閉合類 : 

　　Z : 等於closepath 。 繪製一條直線連接終點和起點，用來封閉圖形。

上述命令都是用大寫英文字母表示，表示坐標系中的絕對坐標。也可以用小寫英文字母，表示的是相對坐標（相對當前畫筆所在點）。  

1 、直線 

代碼 ： 

 

1  <!-- 路徑path 繪製直線 -->
2     <svg width="300" height="200">
3         <path d="M30,10 L270,200 
4                   M30,10 H300
5                   M30,10 V200" style="stroke:black;stroke-width:4" />
6     </svg>

 

 

效果 ： 

 

2、 三次貝塞爾曲線 

代碼 ： 

1   <!-- 路徑path 繪製三次貝塞爾曲線 -->
2     <svg width="500" height="200">
3         <path d="M30,100  
4         C100,20 190,20 270,100  
5         S400,180 450,100" style="fill:white;stroke:black;stroke-width:4" />
6     </svg>

 

效果 ： 

 

 

3、二次貝塞爾曲線

代碼 ： 

1  <!-- 路徑path 繪製二次貝塞爾曲線 -->
2     <svg width="500" height="200">
3         <path d="M30,100
4                  Q190,20 270,100
5                  T450,100" style="fill:white;stroke:black;stroke-width:4" />
6     </svg>

 

效果 ： 

 

 

4、弧線

　　弧線是根據橢圓來繪製的，參數較多 ： 

　　　　rx ： 橢圓x方向的半軸大小。

　　　　ry : 橢圓y方向的半軸大小。

　　　　x-axis-rotation : 橢圓的x軸與水平軸順時針方向的夾角。

　　　　large-arc-flag : 有兩個值（1：大角弧度線 。 0 ： 小角弧度線）。

　　　　sweep-flag : 有兩個值（1：順時針至終點。 0 ： 逆時針至終點）。

　　　　x : 終點x坐標。

　　　　y : 終點y坐標。

 

代碼 ： 

1     <!-- 路徑path 繪製弧線 -->
2     <svg width="500" height="400">
3         <path d="M100,200
4                 a200,150 0 1 , 0 150,-150 z" 
5                 style="fill:yellow;stroke:black;stroke-width:4" />
6     </svg>

a用了小寫字母，表示相對坐標。  M代表當前位置（100，,20） 所以終點位置（100+150,200-150），即（250,50），
包含弧線的x和y方向的半徑分別為200和150，橢圓的x軸與水平軸方向夾角0度。採用大角度，逆時針方向走向終點。
Z表示閉合迴路

 

效果 ： 

 

 

 

六、文字

　　在svg中可以使用<text>標簽繪製文字，其屬性有 ：

　　　　x : 文字位置的x坐標。

　　　　y : 文字位置的y坐標。

　　　　dx : 相對於當前位置在x方向上平移的距離（值為正則往右，為負往左）。

　　　　dy: 相對於當前位置在y方向上平移的距離（值為正則往上，為負往下）。

　　　　textLength : 文字的顯示長度。（不足拉長，足則壓縮）。

　　　　rotate : 旋轉角度（順時針為正，逆時針為負）。

 

代碼 ： 

 

1   <!-- 文字 -->
2     <svg width="300" height="200">
3         <text x="150" y="100" dx="-5" dy="5" rotate=180" textLength="90">
4             I Love Yangyi
5         </text>
6     </svg>

 

 

 

 

效果 ： 

 

可以為文字中某段進行設置樣式，可以使用<tspan>標簽

 

代碼 ： 

 

1   <!-- 文字 添加標簽<tspan></tspan> -->
2     <svg width="300" height="200">
3         <text x="150" y="100" dx="-5" dy="5" rotate=180" textLength="90">
4             I Love <tspan fill="red">Yangyi</tspan>
5         </text>
6     </svg>


 

 

 

 

樣式 ： 

 

七、標記

　　標記（marker）是svg中一個重要的概念，能貼附於<path>、<line>、<polyline>、<polygon>元素上。最經典的應用就是給線段添加箭頭。

　　標記<marker>寫在<defs></defs>中，defs用於定義可重覆利用的圖形元素。來看<marker>的各屬性和意義 :

　　　　viewBox : 坐標系的區域。

　　　　refX,refY : 在viewBox內的基準點，繪製時此點在直線端點上。

　　　　markerUnits : 標記大小的基準有兩個值，即storekeWidth(線的寬度)和userSpaceOnUse（線前段的大小）

　　　　markerWidth,markerHeight : 標識的大小。

　　　　orient ： 繪製方向，可設定為auto（自動確認方向）和角度值。

　　　　id : 標識的id號。

 

繪製一條帶箭頭的直線 ：

代碼 : 

 

 1  <!-- 定義一個箭頭 -->
 2     <svg width="300" height="300">
 3 
 4         <defs>
 5             <marker id="arrow" markerUnits="strokeWidth" 、
 6                     markerWidth="12" markerHeight="12" 
 7                     viewBox="0 0 12 12" refX="6" 
 8                     refY="6" orient="auto">
 9                         <path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill:#000000" />
10             </marker>
11         </defs>
12 
13         <!-- 調用，繪製一條帶箭頭的直線 -->
14 
15         <line x1="0" y1="0" x2="200" y2="100" 
16                 stroke="red" stroke-width="3" 
17                 marker-end="url(#arrow)" />
18 
19     </svg>

 

 

 

效果 ： 

 

繪製一條帶箭頭的曲線 

代碼 ： 

 1 <!-- 定義一個箭頭 -->
 2     <svg width="300" height="300">
 3 
 4         <defs>
 5             <marker id="arrow" markerUnits="strokeWidth" 
 6                     markerWidth="12" markerHeight="12" 
 7                     viewBox="0 0 12 12" refX="6"
 8                     refY="6" orient="auto">
 9                 <path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill:#000000" />
10             </marker>
11         </defs>
12 
13         <!-- 調用，繪製一條帶箭頭的曲線 -->
14 
15         <path d="M20,70 T80,100 T160,80 T200,90" 
16                 style="fill:white;stroke:red;stroke-width:3" 
17                 marker-start="url(#arrow)"
18                 marker-mid="url(#arrow)" marker-end="url(#arrow)" />
19     </svg>

 

 

　　　　marker-start : 路徑起點處。

　　　　marker-mid : 路徑中間端點處。

　　　　marker-end : 路徑終點處。

　　　　使用marker-mid，箭頭將繪製在路徑的節點處，所以對直線無效。

 

效果 ： 

 

 

 

八、濾鏡

　　濾鏡的標簽為<filter>,和標記<marker>一樣，也是在<defs>中定義的。

　　濾鏡的種類很多， 例如 ： feMorphology、feGaussianBlur、feFlood等，還有定義光源的濾鏡feDistantLight、fePointLight、feSpotLight，都是以fe開頭的，現在例舉一個濾鏡　　　　           feGaussianBlur的用法 ：

代碼 ： 

　　做了一個不帶濾鏡的矩形和一個帶濾鏡的矩形，方便大家學習。

 1   <!-- 定義一個濾鏡 -->
 2 
 3     <svg width="500" height="300">
 4         <defs>
 5             <filter id="GaussianBlur">
 6                 <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
 7             </filter>
 8         </defs>
 9         <!-- 沒有帶濾鏡的矩形 -->
10         <rect x="100" y="100" width="150" height="100" fill="blue" />
11 
12         <!-- 帶濾鏡的矩形 -->
13         <rect x="300" y="100" width="150" height="100" fill="blue" filter="url(#GaussianBlur)" />
14 
15     </svg>

 

 

　　 feGaussianBlur是一個高斯模糊的濾鏡。in是使用濾鏡的對象，此處是源圖形SourceGraphic。  stdDeviation是高斯模糊唯一的參數，數值越大，模糊程度越高。

 

效果 ： 

 

 

九、漸變

　　漸變表示一種顏色平滑過渡到另一種顏色。svg中有線性漸變<linearGradient>和放射性漸變<radualGraduent>。本demo為線性漸變。

　　漸變也是定義在<defs>標簽中的。給漸變定義一個id號，在圖形元素上指定此id號即可。

　　x1、y1、x2、y2 ：定義漸變的方向(可水平可垂直)

　　offset ：定義漸變開始的位置

　　stop-color : 定義此位置的顏色

 

代碼 ： 

　　此處做了一個水平漸變的矩形和一個垂直漸變的矩形

 1  <!-- 定義一個漸變 -->
 2 
 3     <svg width="800" height="200">
 4         <!-- 定義水平線性漸變 -->
 5         <defs>
 6             <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
 7                 <stop offset="0%" stop-color="blue" />
 8                 <stop offset="100%" stop-color="#f00" />
 9             </linearGradient>
10         </defs>
11         <!-- 定義水平垂直線性漸變 -->
12         <defs>
13             <linearGradient id="myGradientCz" x1="0%" y1="0%" x2="0%" y2="100%">
14                 <stop offset="0%" stop-color="blue" />
15                 <stop offset="100%" stop-color="#f00" />
16             </linearGradient>
17         </defs>
18         <!-- 水平線性漸變 -->
19         <rect x="10" y="10" width="280" height="180" fill="url(#myGradient)" />
20         <!-- 垂直線性漸變 -->
21         <rect x="330" y="10" width="280" height="180" fill="url(#myGradientCz)" />
22     </svg>

 

效果 ：

 

 

以上就是一些基本圖形的demo，以後想起來其他的還會繼續補充。

 

接下來會做一些複雜點的圖表， 希望大家支持  ~    謝謝。

 

2019-04-23

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 使用d3.v5實現條形圖
    效果圖： 條形圖： 目錄結構： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="css/style.css" media="screen" rel="stylesheet" type="text/c ...
  • Deepin linux Compass.app安裝
    compass.app是集成了sass的工具，安裝完Compass就能夠使用sass。 首先，上官網 可以看到官網上推薦的兩種sass使用方式，application&command line application里不僅僅只有Compass，不過現在點擊Compass.app進行下載。 雖然通常我 ...
  • 使用d3.v5實現折線圖與面積圖
    d3最新是V5版的，比起V2的API變動了不少，寫下我實現過程 效果圖： 面積圖： 折線圖： 目錄結構： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="css/style.css" media=" ...
  • vue-router 用戶登陸
    有些路由頁面需要用戶登陸之後才能訪問如（用戶中心），如果用戶沒有登陸就訪問這些頁面的話就應該轉換到登陸頁面，登陸成功之後在進入該頁面。 需要用到的知識點有：H5中的會話存儲（sessionStorage）、vue-router路由前置操作、路由元信息(meta). 路由配置 在路由頁面中添加auth ...
  • vue.js多頁面開發環境搭建
    利用 vue-cli 搭建的項目大都是單頁面應用項目，對於簡單的項目，單頁面就能滿足要求。但對於有多個子項目的應用，如果創建多個單頁面，顯示有點重覆，特別是 node_modules 會有多份相同的。如果全部放到單頁面項目下，又顯得有點亂，這時候通過改造 vue-cli 搭建的項目為多頁面，就是一個 ...
  • 通過javascript修改class名字-學習筆記
    <!doctype html> <html> <head> <meta charset="urtf-8"> <title>通過js改變class名字改變樣式</title> <style> .tao { /*初始樣式*/ border-radius:35px; width:100px; height ...
  • jQuery雜談一
    1.jQuery對象 jQuery包裝集對象 獲得mydiv的Jquery對象： var divJquery = $("#mydiv"); 2.基礎選擇器 1、ID選擇器格式：$("#id屬性值") 獲取指定id值的對象(只會獲取到第一個id的值)2、類選擇器格式：$(".class屬性值")獲取所 ...
  • VUE 實現複製內容到剪貼板功能
    註： 依賴第三方插件 clipboard 一、安裝插件 二、全局註入（main.js） 三、使用 四、效果圖 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類