当前访客身份:游客 [ 登录  | 注册加入尚学堂]
直播

我来了!

拥有积分:3904
尚学堂雄起!!威武。。。

博客分类

笔记中心

课题中心

提问中心

答题中心

解答题中心

D3.js学习(二)

我来了! 发表于 2年前 (2014-10-20 09:24:57)  |  评论(0)  |  阅读次数(2164)| 0 人收藏此文章,   我要收藏   

上一节中我们已经画出了一个基本的图表,不过忘了给坐标轴添加标签了,所以在本节中我们要给坐标轴加上标签,目标效果如下

image

给X轴添加标签

很明显,标签是不是一个text内容块啊,所以我们只要在svg中添加一个text然后再给这个text定位和指定内容不就行了么?先来看如何给x轴添加标签

//增加一个x轴的标签
svg.append("text")
    .attr("transform", "translate(" + (width/2) + "," + (height + margin.bottom) + ")")
    .style("text-anchor", "middle")
    .text("Date");

上面代码可能又两个地方需要解释,第一,transform属性,详细的介绍可以看我w3c的定义,这里我们用到的是他的一个translate属性,也就是移动,第一个参数是相对于原点在x轴上的位移距离,第二个是相对于原点在y轴上的位移距离;第二,text-anchor属性,是指文本相对于插件点的对齐方式,我们这里用到的是中间对齐,也就是说文本的中点与x轴的中点(文本插入点)对齐.

 

给Y轴添加标签

同理,给y轴添加一个标签

//增加一个y轴的标签
svg.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 0 - margin.left)
    .attr("x", 0 - (height/2))
    .attr("dy", "1em")
    .style("text-anchor" , "middle")
    .text("Value");
这里的rotate值表示文本相对于原点的旋转角度,负数表示逆时针旋转,dy属性表示文本在y轴上的平移距离。

给图表添加标题

添加标题跟添加坐标轴的标签其实是一样的,只不过定位有所不同而已

//给图表添加一个标题
svg.append("text")
    .attr("x", (width/2))
    .attr("y", 0 - (margin.top /2 ))
    .attr("text-anchor", "middle")
    .style("font-size", "16px")
    .style("text-decoration", "underline")
    .text("一个简单的图表");

效果图:
image

这样,坐标轴的标签和图表的标题我们就添加上啦。下一节中,我们将对图表中的path进行处理!

分享到:0
关注微信,跟着我们扩展技术视野。每天推送IT新技术文章,每周聚焦一门新技术。微信二维码如下:
微信公众账号:尚学堂(微信号:bjsxt-java)
北京总部地址:北京市海淀区西三旗桥东建材城西路85号神州科技园B座三层尚学堂 咨询电话:400-009-1906 010-56233821
Copyright 2007-2015 北京尚学堂科技有限公司 京ICP备13018289号-1 京公网安备11010802015183