zoubf的专栏

记录一点碰到的问题和解决方案。感觉国内关于D3.js 4.0版本的相关资料还是少。力导向图布局D3一种布局的方式，可以将你nodes links的节点数据转换成可以绘制的坐标点数据，然后通过svg展现出来，画拓扑图中用到。通过fixed属性来固定节点https://bl.ocks.org/mbostock/...上面作者的demo(d3.js v4)。力导向图的几个特征

SVG 裡頭最為重要的元素：Path，因為SVG 是向量圖，所有的物件和元素都是由 Path ( 路徑 ) 所組成，所以 Path 就具有相當多的指令讓使用者設定， 換句話說，搞懂了 Path 就等於搞定了SVG ( 或是搞定 80% 的 SVG，不管啦 )。本篇文章先將 Path 的指令表列出來，方便之後查找有個列表整裡，其中一個非常需要注意的地方，參數大寫代表絕對座標，小寫代表與前一個座標的相...

上一篇看完了 Path 大部分的指令，這一篇就要介紹最困難的 A 指令，什麼是 A 呢？就是「弧形」 ( Arcs )，更簡單來說就是畫個橢圓圓弧 ( Elliptical Arc )，這裡可能會有人有疑問，為什麼是橢圓圓弧，而不是圓形圓弧呢？因為橢圓形可以做成圓形呀就是這麼簡單ㄎㄎ，因此， A 指令裏頭參數非常之多，竟然高達 7 個參數，以下就一一為大家解釋這些參數。rx ： 橢圓的 x 軸半徑...

在前面的 SVG 研究之路裡，不斷看到 defs 這個元素的身影，從顏色的填充、線段的圖案、濾鏡的定義...等許多的效果，都必須使用 defs 來定義，因此就直接寫了這篇關於 defs 的文章，也把這個常見但用法又時常不同的元素，一次做一個整理，也方便之後使用的參考。什麼是 defsdefs 顧名思義就是「definitions」：定義，我們可以把許多重複性質高的元素，放入 defs 元素內，讓它...