D3的svg解釋？

掌握D3是須要時間節點性的過分的，須要較多的知識，像JS、HTML、SVG等都必須要掌握的，同時還須要有不錯的邏輯思考能力。但若是你能知道D3的原理，從本質上理解D3到底是什麼，那麼不管是學習仍是使用D3都會更加輕鬆容易。

那D3到底是什麼呢？初學者及使用不深的開發人員可能不容易理解它，只知道能夠用它開發圖表。 從字面上講D3是Data-Driven Documents的縮寫，即數據驅動文本，這裏說的文本是web頁面的DOM元素。官方的解釋爲 D3是一個可基於數據操做文本的js庫，它能夠幫助你使用HTML、SVG和CSS讓數據鮮活起來，而且提供了不少可視化組件，以及數據驅動管理DOM的方法。

首先說一些 svg的一些經常使用屬性

基本圖形：

矩形 <rect>
圓形 <circle>
橢圓 <ellipse>
線 <line>   
折線 <polyline>
多邊形 <polygon>
路徑 <path>
複製代碼

矩形

<svg>
    	<rect 
    	width="300" height="100"
    	style="fill:rgb(0,0,0);stroke-width:1;stroke:rgb(0,0,0)"/>
    </svg>
複製代碼

例子

解釋

width：寬度，

height：高度，

style 屬性用來定義 CSS 屬性

stroke-width 屬性定義矩形邊框的寬度

stroke 屬性定義矩形邊框的顏色

例子

<svg width="100%" height="100%" version="1.1">
    <rect x="10" y="10" width="250" height="50"
    style="fill:blue;stroke:pink;stroke-width:5;
    fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>
複製代碼

解釋

x 屬性定義矩形的左側位置,y 屬性定義矩形的頂端位置

fill-opacity 屬性定義填充顏色透明度

stroke-opacity 屬性定義筆觸顏色的透明度

例子

<svg width="100%" height="100%" version="1.1">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>
複製代碼

解釋

rx 和 ry 屬性可以使矩形產生圓角   複製代碼