成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

交互式數(shù)據(jù)可視化－D3.js（一）

MASAILA / 2787人閱讀

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

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

SVG簡介

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

圖形元素

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

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

矩形

圓形

橢圓

線段

折線

多邊形

路徑

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

矩形

矩形的參數(shù)共有6個：

x: 矩形左上角X坐標(biāo)

y: 矩形右上角Y坐標(biāo)

width: 矩形的寬度

height: 矩形的寬度

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

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

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

圓形多產(chǎn)生是3個：

cx: 圓心的X坐標(biāo)

cy: 圓心的Y坐標(biāo)

r: 圓的半徑

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

cx: 圓心的X坐標(biāo)

cy: 圓心的Y坐標(biāo)

rx: 橢圓的水平半徑

ry: 橢圓的垂直半徑

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

線段的參數(shù)是起點和終點的坐標(biāo):

x1: 起點的X坐標(biāo)

y1: 起點的X坐標(biāo)

x2: 終點的X坐標(biāo)

y2: 終點的X坐標(biāo)

繪制一個線段:
多邊形和折線

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

points: 一系列的坐標(biāo)點

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

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

移動類

M=moveto: 將畫筆移動到指定的坐標(biāo)

直線類

L=lineto: 繪制直線到指定坐標(biāo)

H=horizontal lineto: 繪制水平直線到指定坐標(biāo)

V=vertical lineto: 繪制垂直直線到指定坐標(biāo)

曲線類

C=curveto: 繪制三次貝塞爾曲線經(jīng)過指定的控制點到達(dá)終點坐標(biāo)

弧線類

A=elliptical arc: 繪制橢圓曲線到指定坐標(biāo)

閉合類

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80255.html

相關(guān)文章

  • 交互式數(shù)據(jù)可視化－D3.js（五）過渡

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

    張紅新 評論0 收藏0

  • 交互式數(shù)據(jù)可視化－D3.js（五）過渡

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

    URLOS 評論0 收藏0

  • 交互式數(shù)據(jù)可視化－D3.js（二）選擇集和數(shù)據(jù)

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

    leanote 評論0 收藏0

  • 交互式數(shù)據(jù)可視化－D3.js（二）選擇集和數(shù)據(jù)

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

    褰辯話 評論0 收藏0

  • 交互式數(shù)據(jù)可視化－D3.js（四）形狀生成器

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

    Terry_Tai 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<