码迷,mamicode.com
首页 > Web开发 > 详细

【玩转D3.js】--(1)绘制网格线

时间:2015-03-20 22:01:17      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:数据可视化   d3.js   d3js   d3   网格线   

我们常常使用常规图表(直方图,折线图等)来表现数据。为了清楚的表示数据在数轴上的哪个数值区间,会直接在矩形和点上标注数值。

除了这个办法外,还可以使用色调偏淡的网格作为背景参照。

本文介绍了如何使用D3绘制网格线的小技巧:

 

绘制效果:

技术分享

 

思路很简单:

1 绘制SVG容器。

2 给SVG分组,并设置分组的样式类。

3 为分组分别添加横线和竖线。

 

关键技术介绍

(1) 生成一个10元素的数组:

技术分享

(2) 定义x和y比例尺

x = d3.scale.linear().domain([0,1]).range([p, w - p])

x线性比例尺,将数组的值映射为实际的像素值,例如:

技术分享

(3) 绘制SVG

var svg = d3.select("body").append("svg")
   .attr("width", w)
.attr("height",h);

 

(4) 给SVG添加分组,并设置样式类

var grid = svg.selectAll(".grid")
   .data(x.ticks(10))
 .enter().append("g")
   .attr("class", "grid");
 

(5) 添加线条

grid.append("line")
   .attr("x1", x)
   .attr("x2", x)
   .attr("y1", p)
   .attr("y2", h - p - 1);
…
 

本例很简单,可以使用下面的代码测试效果,你学会了吗?

完整代码:

<!DOCTYPE html>
<html>
         <head>
                   <metacharset="UTF-8" content="">
                   <title>linegrid</title>
                   <styletype="text/css">
                   //分组中线的样式,这里设置了颜色值,实际使用可以更淡,例如stroke: #ccc
                   .gridline {
                     stroke: #000;
                   }
                  
                   </style>
                   <scripttype="text/javascript" src="d3.js"></script><!--下载到本地-->
         </head>
 
 </head>
 <body>
   <script type="text/javascript">
 
var data = d3.range(10);// (1) 生成一个10元素的数组
 
var w = 960,
    h= 500,
    p= 40,//内边距
    x= d3.scale.linear().domain([0, 1]).range([p, w - p]), //(2) 定义x和y比例尺
    y= d3.scale.linear().domain([0, 1]).range([h - p, p]);
 
//(3) 绘制SVG
var svg = d3.select("body").append("svg")
   .attr("width", w)
   .attr("height", h);
 
//(4) 给SVG添加分组,并设置样式类,样式见<style>标签中的设置
var grid = svg.selectAll(".grid")
   .data(x.ticks(10))
 .enter().append("g")
   .attr("class", "grid");
//(5) 添加线条,设置起始坐标(x1,y1)和结束坐标(x2,y2)的值即可
//竖线
grid.append("line")
   .attr("x1", x)
   .attr("x2", x)
   .attr("y1", p)
   .attr("y2", h - p - 1);
 
//横线
grid.append("line")
   .attr("y1", y)
   .attr("y2", y)
   .attr("x1", p)
   .attr("x2", w - p + 1);
   
   </script>
  </body>
</html>


【玩转D3.js】--(1)绘制网格线

标签:数据可视化   d3.js   d3js   d3   网格线   

原文地址:http://blog.csdn.net/tianxuzhang/article/details/44497785

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!