第一篇博客 赶鸭子上架的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 334
                C153 334 151 334 151 334
                C151 339 153 344 156 344
                C164 344 171 339 171 334
                C142 314 131 322 131 334
                C131 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）

最新版本v4

用d3画直方图（简单代码）

const dataset=[50,43,120,87,99,167,142];

首先定义一个数据集（一般由服务器提供）

    const height = 400;
    const width = 400;

其次，创造一个svg，定义他的宽和高

const svg = d3.select("#svg").append("svg").attr("height",height).attr("width",width);

这是一个选择器，选择了id为svg的元素，往里面append一个svg元素（添加svg图形），设置svg的宽和高

svg此时已经生成，只不过是空白

 const padding = {top:20,left:20, right:20,bottom:20}

样式设置---加边距以免接触到边界

    const rectStep = 35;
    const rectWidth = 30;

每个矩形所占宽度和真实的宽度（间距为rectStep-rectWidth=5）

下面开始画图形

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");

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