出发！使用D3.JS作图 - 知乎 - 程序猿·D·安宇雨 DeepMind

出发！使用D3.JS作图 - 知乎

安宇雨 - 随手采集
2023-01-13 15:52:29
随手采集
0000-未整理-等待研究

通过上一篇文章介绍，我们大致了解了如何在html中使用svg，同时我们也了解到了直接使用svg的不便。这一篇文章我们便简单使用一下D3.js。

通过之前的介绍我们大概知道，在svg中作图，需要使用不少数据来表示坐标点，路径，填充色等等，这是svg图的关键。

第一步，如使用其他js类库一样，我们先引用D3.JS，这一步我就不多说了。

//直接连接最新版本
< script src="http://d3js.org/d3.v4.min.js"></script> 
//或者下载之后引用
< script src="/Script/d3.js"></script>

我们之前说了，svg作图中，重要的是“数据”，所以，作图的第一步便是把我们希望使用的“数据”转变为在svg中可使用的数据。转化数据这一步，在使用d3.js的时候，一般会交给“生成器”去做。然后再使用转化好的数据创建图像。

所以总结起来一般步骤为：
1.创建生成器
2.转化数据
3.绘制

那我们来试一下，目标是使用d3.js绘制之前直接使用svg做的圆环。

第一步，创建一个arc生成器。

var arc = d3.arc();

第二步，转换数据。

//原始数据
//存在一个对象之中，假设我们要接受后台的数据，接受了直接放在对象中也很方便。
 var myData = {
                innerRadius: 80,//内半径，如果要画圆，设为0
                outerRadius: 100,//外半径
                startAngle: 0,//起始角度，此处使用弧度表示
                endAngle: 2*Math.PI//结束角度
            };
 //数据转化
 var outData = arc(myData); 
 //如果想查看转换之后的数据，可以添加一个alert方法进行查看。
 //alert(outData);

第三步，绘制

//使用d3.js选择器选择一个节点，插入svg元素
 var svg = d3.select("body")//选择body节点
                .append("svg")//添加svg节点
                .attr("width", 400)//设置svg节点的宽度
                .attr("height", 400);//设置高度
 //在svg中绘制
 svg.append("g")//添加g元素
                .attr("transform", "translate(" + (400 / 2) + "," + (400 / 2) + ")")//设置图像在svg中的位置
                .append("path")//添加路径元素
                .attr("fill", "#00000")//填充颜色，黑色
                .attr("d", outData);//加入转化后的数据