d3-系列-基础简介

本篇文章会介绍怎么绘制一个圆圈,一条线,一个矩形。

1.SVG是什么?

先介绍SVG,在d3的世界里的重要性就如何html中的body元素一样,它可以认为d3元素的母体,么有SVG,d3就没有发挥的余地。一般来说,IE8一下的是不支持SVG的,因此对浏览器兼容方面是有点缺陷的。

1.1 如何绘制SVG?

首先要创建一个SVG元素,一般我们会把它保存下来,留作以后使用

var svg = d3.select("body").append("svg");

仅仅创建它还不够,我们需要设置它的宽和高

svg.attr('width', 500).attr('height', 400);

d3.js是可以链式编程的,因此你可以把上面两句连成一句话来使用。

代替的html代码:

<svg width="500" height="400"></svg> 

2.如何在SVG的基础上绘制一个圆圈?

类似于绘制SVG一样,我们现在要在svg变量上append一个圆圈,而绘制圆圈需要圆的半径,圆圈的圆心坐在的横坐标和纵坐标,因此在代码里面我们也要写明这几点。

var circle = svg.append('circle').attr('cx', 250).attr('cy',250).attr('r',25);

代替的html代码: 

<circle cx="250" cy="25" r="25"/>

3.如何SVG的基础上绘制一个矩形?

我觉得走完第二步,大家肯定也知道矩形怎么绘制了,矩形在这里是rect元素,我们需要制定的是它的宽高以及左上角的横坐标纵坐标,以下代码我们绘制出一个姿色的矩形框,试着改变里面的值看看,你会意识到这些属性的意义,是不是很神奇?

var rect = svg.append('rect').attr('x',0).attr('y',0).attr('width',30).attr('height',30).attr('fill','purple');

代替的html代码

<rect x="0" y="0" width="30" height="30" fill="purple"/>

4.如何在SVG的基础上绘制一条线?线的元素师line,我们可以制定其实起始横纵坐标,填充颜色等,是不是等不及了?赶紧在自己浏览器中尝试看看吧?

var line = svg.append('line').attr('x1',0).attr('y1',0).attr('x2',500).attr('y2',50).attr('stroke','black');

代替的html代码

<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>

总结:顺着这样,其实在SVG中绘画d3基本上是这样的套路,下个版本我会讲述d3是怎么数据驱动图形的,以及我们可以一起来完成一个数据地图。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值