d3js使用说明

前端和数据可视化有许多内容都是重合的。
下面的代码都是在react中的jsx

d3js

先看一下 svg

1. svg

svg坐标

SVG 坐标空间的 x = 0，y = 0 坐标位于左上角。
SVG 坐标空间的 Y 坐标从上到下增长。

线条

            <line x1 = "100" y1 = "100" 
               x2 = "100" y2 = "200" style={{ stroke:"rgb(255,0,0)", strokeWidth :"20"}}/>

矩形

                        <rect x = "20" y = "20" width = "300" height = "300"></rect>

圆形

                        <circle cx = "200" cy = "50" r = "50"/>

椭圆

      <ellipse cx = "200" cy = "50" rx = "100" ry = "50"/>

svg的transform属性

2. d3的动画

D3.js 通过转换支持动画。我们可以通过正确使用转换来做动画。

1. transition

    d3.select("body").transition().style("background-color","rgb(0,150,120)").duration(5000);

duration

持续时间

delay

延迟

3. d3画图

不同于echart等框架，d3其实更底层一些。

条形图

下图说明了条形图的核心是通过translate进行控制的。通过设置width和height可以控制条形图的显示。