第一篇博客赶鸭子上架的d3.js学习笔记（bilibili从零开始画图表学习笔记感谢万能的b站以及up睿小狼d）

svg:

可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图片格式。他由万维网联盟制定，是一个开放标准。（源代码类似于html）

一个简单的代码

<svg xmlins="gttp://www.w3.org/2000/svg" width="600" height = "600" version="1.1">

第一句：规定了画布的宽和高以及svg版本（一般为1.1），地址是规范地址。一般第一行不变。

开始描绘具体图形：

<rect width="200" height = "100" x = "20"  y="20" style="fill:red;stroke: blue;stroke-width:4"/>
<rect height="100" width="200" x="250"y="20"  rx = "200"  ry="100" style="fill:red;stroke: blue;stroke-width:4"/>

reck：矩形有宽高，x，y坐标，样式 fill填充 stroke 边框 stroke：边框宽度 r代表radiu（弧度），

x的弧度（rx）和width同时为椭圆，小于width为圆角矩形（y同）

 <circle cx="100" cy="200" r="80" style="fill:yellow"/>

circle：圆 cx：x坐标，cy：y坐标 r：半径

<ellipse cx="330" cy="280" rx="100" ry="80" style="fill:yellow"/>

ellipse:椭圆 cx：x的半径 cy：y的半径

<line x1="0" x2="500"y1="0" y2="360" style ="stroke:#000;stroke-width:4"/>

line：直线：x1，y1 起始点坐标 x2，y2 终止点坐标

 <polygon points="100,20 20,90 20,200"style="fill:green;stroke:orange;stroke-width: 4"/>

polygon：封闭的多边形直接给出端点的坐标（此例为三角形）

 <polyline points="100,20 20,90 20,200"style="fill:green;stroke:orange;stroke-width: 4" transform="tranlate"/>

polyline:只划线，不封闭

 <text x="200" y="150" style="fill:purplr" textlength ="90">SVG SVG<tspan fill="red">D3.js</tspan></text>

text:文字并用tspan为部分文字加样式（文本可以被选中）

  <path d="M250 150 L150 350 L350 350 Z"/>

<path d="M250 150 L150 350 L350 350 Z"/><path d="M153 334C153 334 151 334 151 334C151 339 153 344 156 344C164 344 171 339 171 334C142 314 131 322 131 334C131 350 162 364 156 364"style="fill:white;stroke:red;stroke-width: 2"/>

第一个path效果：形成一个三角形

第二个：“某个螺旋形”

path的指令

M = moveto 移动到

L = lineto 画线到

H = horizontal lineto 水平线到

V = vertical lioto 垂直线到

C = curveto 三次贝塞尔曲线到

S = smooth curveto 光滑三次贝塞尔曲线到

Q = qudratic Belzier curve 二次贝塞尔曲线到

T = smooth quadratic Belzier curve 光滑二次贝塞尔曲线到

A = elliptical Arc 椭圆弧

Z = closepath 关闭路径

d3（Data-Driven DOculusments）

下面开始画图形

svg.selectAll("rect").data(dataset).enter().append("rect").attr("fill","red").attr("x",(d,i)=>padding.left + i*rectStep).attr("y",(d,i)=>height-padding.bottom-d)

seleteAll选择所有的矩形元素，data方法绑定数据，调用enter方法（现在没有rect元素，selectAll查不到，绑定数据为空。enter会使多把数据生成新的rect）生成rect并填充元素

attr的第二个参数可为函数，有两个默认参数，在这里面通过几何计算方法算出出x和y坐标应在的位置再返回就可以了（比例尺更灵活，后面再学）

 .attr("width",rectWidth).attr("height",d=>d);

定义矩形的宽度和高度

往直方图上添加文字

 const text=svg.selectAll("text").data(dataset).enter().append("text").attr("fill","#fff").attr("font-size","14px").attr("text-anchor","middle")

与画矩形的第一步类似，为每个矩形生成并绑定text，添加基本的样式

.attr("x",(d,i)=>padding.left + i*rectStep)
.attr("y",(d,i)=>height-padding.bottom-d)

添加锚点

 .text(d=>d)

画出文字（赋值为数据值）

 .attr("dx",rectWidth/2).attr("dy","1em");

此时要注意文字的锚点是他的中心，所以需要后期的修正（通过偏移修正位置）