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

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

本文介绍了如何使用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>


Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生