d3js使用说明

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

d3js

先看一下 svg

1. svg

svg坐标

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

线条

矩形

圆形

椭圆

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可以控制条形图的显示。