html上绘制网格线,【玩转D3.js】--(1)绘制网格线
我们常常使用常规图表(直方图,折线图等)来表现数据。为了清楚的表示数据在数轴上的哪个数值区间,会直接在矩形和点上标注数值。
除了这个办法外,还可以使用色调偏淡的网格作为背景参照。
本文介绍了如何使用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);
…
本例很简单,可以使用下面的代码测试效果,你学会了吗?
完整代码:
linegrid
//分组中线的样式,这里设置了颜色值,实际使用可以更淡,例如stroke: #ccc
.gridline {
stroke: #000;
}
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添加分组,并设置样式类,样式见
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);
html上绘制网格线,【玩转D3.js】--(1)绘制网格线相关推荐
- D3.js + Canvas 绘制组织结构图
D3.js + Canvas 绘制组织结构图 使用 D3.js 默认的 svg 渲染 D3默认的树状图画图使用的是svg, 比如这个来自D3作者的例子: https://bl.ocks.org/mbo ...
- 利用D3.js快速绘制力导向图
碎碎念: 最近课题需要基于图论和力导向图可视化每个脑电通道之间的连接性,MATLAB画的效果差强人意,于是上网搜寻到JavaScript 的一个函数库--D3.js,想快速得到数据的可视化结果 简介D ...
- D3.js 01绘制BarChart
转载于B站小魁少爷的D3.js教程 非常不错的教程
- 用js绘制html5数值曲线,Chart.js 教程绘制曲线图(Line chart)
Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.它非常简单帮你展现各种数据的图表展现形式,我们今天看看如何引入和基本的操作,并用它绘制一个制曲线图(Line chart). ...
- D3.js从入门指南
D3.js从入门指南 前言 近期略有点诸事不顺,趁略有闲余之时,玩起D3.js.之前实际项目中主要是用各种chart如hightchart.echarts等,这些图形库玩起来貌都是完美的,一切皆可配置 ...
- d3.js v3版本实现-树状图
参考的例子:http://bl.ocks.org/robschmuecker/7880033 一.为什么选择d3.js 二.d3.js概述 三:树状图实现 1.创建svg 2.在svg元素里面画一个g ...
- d3.js html显示图片,d3.js v4:如何在鼠标点击节点后显示图像
在使用d3.js时仍然相当缺乏经验,我碰到了一个障碍. 希望有人能帮助我.d3.js v4:如何在鼠标点击节点后显示图像 我试图在鼠标单击图形中的节点时显示图片. 理想情况下,我想单击几个节点并显示图 ...
- D3.js 绘制柱状图
使用D3 V4版本绘制 使用D3绘制柱状图,绘制效果如下: 使用D3绘制柱状图,先对需要绘制的图形拆解,主要分为以下几个部分: 1. 比例尺的定义 2. 坐标轴的绘制 3. 添加矩形 4. 修改坐标轴 ...
- d3.js——箭头的绘制
首先我们要明白如何在svg中进行箭头的绘制: 先写一对<defs>,里面再写一对<marker>,其中marker的属性意义为: viewBox 坐标系的区域 refX, re ...
- 【 D3.js 入门系列 --- 10 】 地图的绘制
地图的制作在 D3 中可以说是最重要的一环.因为在进行数据可视化时,很多情况都会和地图联系在一起,如中国各省的人口多少,GDP多少等,都可以和地图联系在一起. D3 中制作地图所需要的文件问 JSON ...
最新文章
- 二值logit模型的适用条件_一文读懂条件Logistic回归
- WEB应用之网页数据分析工具
- Boost:演示了black-scholes option 定价内核
- poi的sax模式读取xls_POI SAX 如何修改大excel 文件内容-问答-阿里云开发者社区-阿里云...
- Quartz简答介绍
- 几个你可能不了解的CSS单位
- 总线、设备和驱动的关系
- RHCS 测试过程(含GFS2),未完待续!
- bzoj 1036: [ZJOI2008]树的统计Count(树链剖分 点权)
- 定义通用分销渠道和通用产品组
- 开发一个小程序商城需要多少钱?
- 走出校门,工作4个月的工作感想
- 企业微信H5登录流程,以及遇到的问题解决
- 低轨卫星传播特性仿真与分析
- JavaScript在数组尾部添加元素
- 导航栏不变,切换局部页面的方法
- mysql 匹配多个字符_在MySQL语句中,可以匹配0个到多个字符的通配符是____。
- CSS Ul(列表样式)
- 移动互联网应用技术架构简介-Restful服务
- Android自动化框架对比
热门文章
- android 自定义indicator,Android自定义Indicator
- 五、神奇的自然常数e之“自然”魅力
- react 学习之Protal
- 基于JavaEye-API实现的Gerry-聊天QQ版v2.0
- 阿里云企业邮箱2019
- java.lang.InstantiationException: com.lch.commder.entity.Car 已解决
- html页面自动滑动,html实现页面滑动
- Python编程从入门到实践(第五章练习)
- Nginx配置Https 443 端口
- 联想个人云 X1 五盘位NAS全网首发评测 值得买吗?