SVG標簽里的內容和一些d3.js操作

• 前言
• 一、svg
• • g
  • foreignobject
  • line
  • rect
  • circle
  • path
  • text
  • 一些標簽上的常見屬性
• 二、d3.js [v5中文文檔](https://www.d3js.org.cn/)
• • 1. d3-selection
  • 2. d3-zoom
  • 2. d3-force
  • 2. d3-hierarchy
• 總結

---

前言

迫于工作需要，使用到了d3來繪制基于svg的思維導圖和力導向圖
所以對svg還算比較熟悉了，在此做個紀念。
真文檔還是去看菜鳥吧

---

一、svg

這個圈就是一個常見的，很方便的loading圖（由于文檔過濾掉了animateTransform 標簽原因，沒動效，實際在瀏覽器中是可以無限旋轉的）
拿來即用的小工具： loading.io

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgba(255, 255, 255, 0); display: block; shape-rendering: auto;" width="50px" height="50px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" r="32" stroke-width="8" stroke="#1989fa" stroke-dasharray="50.26548245743669 50.26548245743669" fill="none" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="0 50 50;360 50 50"></animateTransform></circle></svg>

svg常用于一些小圖標icon或者內容不復雜的圖片作為大圖。由于svg全是標簽代碼，內容較少，所以使用起來會比等png類圖片加載要舒服

需要注意的是svg對象與普通dom對象有一些不同，比如hasClass無效，所以jquery上的方法需要視情況而定

g

g = group 也就是對標簽進行分組，無實際顯示，當一個矢量圖內的標簽多起來，每個標簽都有不同的定位或者是需要拿出來做篩選的時候，就需要g標簽來包裹，通俗點類比就是 ul=svg>li=g

foreignobject

不兼容IE，類比一下相當于iframe。如果需要在svg內加入一些div這樣的html元素，就需要用這個標簽包裹起來，內容和普通dom一樣

line

給定起點xy軸值x1，y1和終點x2，y2連成直線

rect

給定寬高屬性畫出矩形，如果需要填充添加fill屬性顏色值，否則添加stroke顏色值畫出邊框

circle

給定半徑r畫出原型

path

路徑畫筆，是實現所有不規則圖形的通用方案，基礎點使用就是畫兩點直線。重要屬性d，M0 0 L0 10 意思就是移動到xy坐標軸為(0,0)的位置再畫線到(0,10)
和canvas的moveTo()，lineTo()類似

text

想要在svg內添加文字必須用這個標簽包裹，想要換行的話，我的實現方式是按長度分割字符串，添加到text包裹下的tspan標簽內，每一行一個tspan標簽

一些標簽上的常見屬性

• fill 填充內容為指定顏色
• stroke 設定畫筆顏色
• stroke-width 畫筆寬度粗細
• xy 相對于當前畫布偏移（svg指定寬高的坐標軸）
• stroke-opacity 畫筆透明度
• stroke-dasharray 虛線間隔，得實際微調

---

二、d3.js v5中文文檔

與lodash這樣的方法集相同，在d3里面分為不同的插件，每個插件使用到都有不同的方法。這里有局限性，我只用到了部分

1. d3-selection

d3里面方法是鏈式調用，分割的很細致，最常用的就是 d3-selection
調用方式與jquery一樣，返回d3對象

//select選擇一個,selectAll選擇所有標簽，可以與jquery一樣選擇id或者class const svgContainer = d3.select("svg") .attr("class", "graf") // 選中svg標簽，為其添加一個class值，如果已經有class會被覆蓋.style("color", "red")const g = svgContainer.append("g") //像剛才找到的svg內添加一個分組標簽g const rect = g.append("rect") //添加一個矩形.data([{w:100, h:200}]) //為剛才添加的這個矩形綁定數據，數組格式.attr("width",function(d){ //d={w:100,h:200}return d.w; //獲取綁定數據，如果是多個選中，按數組順序拿到data}) const text = g.append("text").text("添加文字")

2. d3-zoom

自帶svg畫布操控插件，可以進行簡單的縮放和拖拽畫布

svgContainer.call( //為這個svg綁定事件d3.zoom() //創建一個新的縮放行為.scaleExtent([0.1, 5]) //限制縮放范圍.on("zoom", function (d) {// 縮放事件綁定}).on("wheel.zoom", null) // 鼠標滾輪事件綁定.on("dblclick.zoom", null); //雙擊事件綁定 )

2. d3-force

用于繪制力導向圖，給圖形定義互斥力，引力大小等。畫好圓圈和線條，其他交給插件

var forceSimulation = d3.forceSimulation();// 設置圖形的中心位置forceSimulation.nodes([{key: "唯一ID",}]).force("link", d3.forceLink([{key: "唯一ID",source: "連線的起點，node節點的key",target: "終點",}]).distance(150).strength(1)) //防止碰撞混亂// 間距，碰撞強度.force("collision",d3.forceCollide().radius(function (d) {// 單獨區分排斥}) //margin邊距.strength(0.1) //重力指數).force("charge", d3.forceManyBody().strength(-1000)) //排斥.velocityDecay(0.5) //摩擦力，震動.alpha(0.7) //初始動畫速度.on("tick", ticked);// ticked方法最重要，當鼠標觸發節點交互時，重新計算所有節點的位置，畫出連線的起始

2. d3-hierarchy

用于繪制力樹形結構圖，這里由于每個節點寬高不定，會對相鄰節點有擠壓，所以用到了另一個插件 d3-flextree

這是思維導圖實現的效果圖，實現起來說起簡單，其實是有很多坑

var flextree = d3Flextree.hierarchy; // 三方插件基礎配置 var layout = flextree({spacing: nodeHeight / 2 + 10, //左右布局時的間隔高度}); var root = layout.hierarchy(d.data[0], function (d) {// 布局節點位置 }); root.sort() // 按綁定數據規則排序，名稱，id之類的要求 root.each(function(d){}) //這后面可以對節點偏移做一些調整

d3.select().data() 首先綁定數據，父子結構

使用基礎的 d3-hierarchy 或者插件版d3-hierarchy 給定每個節點的位置布局，比如根節點是（0,0）那么右邊第一個節點就需要移動x值，向右為加（100,0）

如果是右側布局，直接使用。如果是左右布局，需要把data分為兩份，分別使用d3-hierarchy生成樹樁布局，左側x軸值為負。如果是上下布局，偏移y值

最后根據綁定的數據繪制節點圖形和文本，連線根據當前布局完成后兩節點位置計算，綁定點擊和拖拽事件

---

總結

用多了 d3 能理解到 echarts 這種圖表的實現

總結

以上是生活随笔為你收集整理的讲一下 SVG... 吧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。