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 属性可以使矩形产生圆角   复制代码