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

通过上一篇文章介绍,我们大致了解了如何在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);//加入转化后的数据

至此,我们的圆环便画好了。在讲d3.js的选择器之前便直接讲这个小demo,大家可能会有疑惑,但是我认为先自己写出一个小图像会提高学习的积极性。

请记住这三个步骤,在使用d3.js的过程中,几乎所有的作图都经过这三个步骤,不管是简单的还是复杂的图形。

**参考:
http://github.com/d3/d3-shape/blob/master/README.md#arcs**

我的原文网址:

出发!使用D3.JS作图 - 胡不余

注:题图来源于网络


原网址: 访问
创建于: 2023-01-13 15:52:29
目录: default
标签: 无

请先后发表评论
  • 最新评论
  • 总共0条评论