交互式數據可視化－D3.js（一）

MASAILA 發布于2019-08-20 10:39 / 2780人閱讀

摘要：如其中，和表示繪制區域的寬高，表示版本號。下面分別是繪制一個多邊形和折線路徑標簽功能最豐富，以上圖形都可以使用路徑制作出來，用法與折線類似給出一個坐標點在坐標前添加一個英文字母，表示如何運動到此坐標點點。英文字符按照功能分為五類。

在D3中會穿插SVG 方便大家對D3對使用

SVG簡介

可縮放矢量圖(scalabel vector graphics)，是用于描述二維矢量圖形的一種圖形格式，是由W3C制訂的開放標準。SVG使用XML格式來定義圖形，IE8版本以后的瀏覽器絕大部份都支持SVG。

圖形元素

使用SVG中的圖形元素，可以在HTML文件中嵌入，也可以多帶帶寫成文件來使用。如：XXX.svg

其中，width和height表示繪制區域的寬高，varsion表示版本號。需要繪制的圖形都要添加到這一組SVG之間。
SVG中預定了七種形狀元素：

矩形

圓形

橢圓

線段

折線

多邊形

路徑

這些元素表示形狀的參數各有不同，但也有一些相同的屬性。下面介紹這些元素的參數和示例。

矩形

矩形的參數共有6個：

x: 矩形左上角X坐標

y: 矩形右上角Y坐標

width: 矩形的寬度

height: 矩形的寬度

rx: 對于圓角矩形，指定橢圓在X方向的半徑

ry: 對于圓角矩形，指定橢圓在X方向的半徑

下面分別是繪制一個直角和圓角矩形:

圓形和橢圓形

圓形多產生是3個：

cx: 圓心的X坐標

cy: 圓心的Y坐標

r: 圓的半徑

橢圓的參數和圓形類似，只是半徑分為水平半徑和垂直半徑：

cx: 圓心的X坐標

cy: 圓心的Y坐標

rx: 橢圓的水平半徑

ry: 橢圓的垂直半徑

下面分別是繪制一個圓形和橢圓形:

線段

線段的參數是起點和終點的坐標:

x1: 起點的X坐標

y1: 起點的X坐標

x2: 終點的X坐標

y2: 終點的X坐標

繪制一個線段:

多邊形和折線

多邊形和折線意義都只有1個參數：

points: 一系列的坐標點

不同之處多邊形將會和折線連起來折線不連。下面分別是繪制一個多邊形和折線:

路徑

標簽功能最豐富，以上圖形都可以使用路徑制作出來，用法與折線類似給出一個坐標點在坐標前添加一個英文字母，表示如何運動到此坐標點點。英文字符按照功能分為五類。

移動類

M=moveto: 將畫筆移動到指定的坐標

直線類

L=lineto: 繪制直線到指定坐標

H=horizontal lineto: 繪制水平直線到指定坐標

V=vertical lineto: 繪制垂直直線到指定坐標

曲線類

C=curveto: 繪制三次貝塞爾曲線經過指定的控制點到達終點坐標

弧線類

A=elliptical arc: 繪制橢圓曲線到指定坐標

閉合類

Z=closepath: 繪制一條直線連接終點和起點。用來閉合圖形

路徑這里只做介紹。有興趣的可以去[MOZ]: https://developer.mozilla.org... 了解

GPU云服務器云服務器 d3.js數據可視化實戰大數據可視化 d3.js d3.js數據可視化實戰手冊交互式數據可視化

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

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

交互式數據可視化－D3.js（五）過渡

摘要：設置過渡屬性會對每個選中的元素進行調用，并依次傳入當前綁定元素的數據設置過渡樣式設置樣式插值過渡開始時將文本設置為值將屬性按照插值進行過渡。和都是用此函數實現的在使用過渡時是對于選擇集自身的元素來說的，選擇集的子元素不受影響。過渡過渡效果的起始狀態和目標狀態都很明確，指定之后元素會從起始狀態過渡為目標狀態。初始化一個過渡效果，有如下幾個方法：var tran = d3.transi...

張紅新 2019-08-02 11:53 評論0 收藏0
交互式數據可視化－D3.js（五）過渡

摘要：設置過渡屬性會對每個選中的元素進行調用，并依次傳入當前綁定元素的數據設置過渡樣式設置樣式插值過渡開始時將文本設置為值將屬性按照插值進行過渡。和都是用此函數實現的在使用過渡時是對于選擇集自身的元素來說的，選擇集的子元素不受影響。過渡過渡效果的起始狀態和目標狀態都很明確，指定之后元素會從起始狀態過渡為目標狀態。初始化一個過渡效果，有如下幾個方法：var tran = d3.transi...

URLOS 2019-08-23 12:44 評論0 收藏0
交互式數據可視化－D3.js（二）選擇集和數據

摘要：相關的函數有兩個和的工作過程的方法很簡單，使用的也比較少。的工作過程能將數據各項分別綁定到選擇的元素集上。當數組長度與元素數量不一致時，同樣能夠處理。多出的元素在最后。選擇集 select和selectAll類似jquery： d3.select(body) d3.select(.body) d3.select(#body) d3.selectAll(...

leanote 2019-08-02 11:54 評論0 收藏0
交互式數據可視化－D3.js（二）選擇集和數據

摘要：相關的函數有兩個和的工作過程的方法很簡單，使用的也比較少。的工作過程能將數據各項分別綁定到選擇的元素集上。當數組長度與元素數量不一致時，同樣能夠處理。多出的元素在最后。選擇集 select和selectAll類似jquery： d3.select(body) d3.select(.body) d3.select(#body) d3.selectAll(...

褰辯話 2019-08-23 12:42 評論0 收藏0
交互式數據可視化－D3.js（四）形狀生成器

摘要：形狀生成器線段生成器使用默認的設置構造一個生成器。如果指定了則將訪問器設置為指定的函數或數值并返回當前生成器。形狀生成器線段生成器 var linePath = d3.line() - 使用默認的設置構造一個 line 生成器。 linePath.x() - 如果指定了 x 則將 x 訪問器設置為指定的函數或數值并返回當前 line 生成器。如果沒有指定 x 則返回當前 x 訪問器...

Terry_Tai 2019-08-02 11:54 評論0 收藏0