D3的svg解释？掌握D3是需要时间节点性的过度的，需要较多的知识，像JS、HTML、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 属性可使矩形产生圆角