D3基础--数轴
转载请注明出处！
概述：
与比例尺类似，D3的数轴实际上也使用来定义参数的函数。但与比例尺不同的是，调用数轴函数并不会返回值，而是会生成数轴相关的可见元素。包括：轴线，标签和刻度。
但是要注意数轴函数只适应于SVG图形，因为他们生成的都是SVG元素，同样，数轴是设计与定量比例尺（与序数比例尺相对）配合使用的。
定义和创建X轴：
//定义x轴 var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom"); //创建x轴 svg.append("g")
.call(xAxis);
上面的代码首先引用了svg，然后append()在这个元素的末尾追加了一个新的g元素。在SVG标签中，g元素是一个分组元素。分组元素是不可见的，跟line，rect和circle不一样，但是他有两大用途：
一是可以用来包含（或组织）其他元素，好让代码看起来整齐；
二是可以对整个分组应用变换，从而影响到该分组中所有元素（line，rect和circle）的视觉表现。
创建了新的g元素后，我们直接在这个元素上调用了call()方法，call()的作用如下：
D3的call()方法回去的传递过来的元素，然后把它交给其他函数，对我们这而言，传递过来的元素是新的分组元素g（虽然这个元素不是必须的，但是鉴于数轴函数需要生成很多线条和数值，有了它可以把所有的元素都封装到一个分组对象中）。而call()接着把g元素交给xAxis函数，也就是要在g元素中生成数轴。
效果图：
修整数轴：
首先给新创建的g元素添加一个axis类，然后为他添加CSS样式：
svg.append("g")
.attr(“class”, “axis”)
.call(xAxis);
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
现在就体现出把所有数轴元素组织到一个分组g中的好处了，只要使用简单的CSS选择符.axis就能为其中的任何元素添加样式。数周本身是由path，line和text元素组成的，因此上面的css样式瞄准这三个元素。注意，上面通过css对SVG元素使用样式的时候，只能使用SVG认识的属性名。（SVG的属性可以参照MDN网站）。
调整坐标位置到图表下面：
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
通过设置g元素的属性transform。SVG的变换功能非常强大这儿先介绍平移（transform）变换。他可以把整个g分组向下平移一段距离。
平移变换的语法很简单，就是translate(x, y)，x,y就是把元素移动到新位置的x和y坐标。可以在浏览器中查看ＤＯＭ元素g。
效果图：
优化刻度：
数轴上的刻度线（ticks）使用来传达信息的，也不是越多越好。可以用ticks()方法粗略的指定刻度线的数量。注意，D3只是把ticks的值当做一个参考，如果发现有更清晰方便理解的值，那么他就会舍弃ticks的值。
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5); //粗略的设置刻度线的数量
垂直数轴：
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
同样设置起始坐标：
//Create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
效果图：
最终代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>D3: Test of formatted axis values</title>
<script type="text/javascript" src="../d3/d3.js"></script>
<style type="text/css">
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 300;
var padding = 30;
/*
//Static dataset
var dataset = [
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
[600, 150]
];
*/
//动态随机生成数据集
var dataset = []; //Initialize empty array
var numDataPoints = 50; //Number of dummy data points to create
var xRange = Math.random() * 1000; //Max range of new x values
var yRange = Math.random() * 1000; //Max range of new y values
for (var i = 0; i < numDataPoints; i++) { //Loop numDataPoints times
var newNumber1 = Math.floor(Math.random() * xRange); //New random integer
var newNumber2 = Math.floor(Math.random() * yRange); //New random integer
dataset.push([newNumber1, newNumber2]); //Add new number to array
}
//Create scale functions
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([h - padding, padding]);
var rScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([2, 5]);
//为刻度标签定义样式（这个例子只是做说明并无太大实际意义）
var formatAsPercentage = d3.format(".1%");
//Define X axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5)
.tickFormat(formatAsPercentage);
//Define Y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5)
//对数轴刻度应用定义的格式化函数（观察坐标轴）
.tickFormat(formatAsPercentage);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create circles
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", function(d) {
return rScale(d[1]);
});
/*注释掉各点旁边的标签
//Create labels
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d[0] + "," + d[1];
})
.attr("x", function(d) {
return xScale(d[0]);
})
.attr("y", function(d) {
return yScale(d[1]);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");
*/
//Create X axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
//Create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
</script>
</body>
</html>
效果图：
For my lover, cc!
参考书籍：《数据可视化实战》
D3基础--数轴的更多相关文章
- 数据可视化(7)--D3基础
一直想写写D3,觉得D3真心比较强大,基本上你能想出来的图表都能绘制出来,只不过使用起来比前几个要稍麻烦一点. 正好最近读完了<数据可视化实战>,将关于D3的知识梳理了一遍,写这篇博客记录 ...
- D3基础---比例尺
转载请注明出处! 比例尺简述: 比例尺是一组把输入域映射到输出范围的函数. 一般来说数据集中的值不可能恰好与图表中的像素尺度一一对应.比例尺就是把这些数据值映射到可视化图形中使用的新值的便捷手段. D ...
- D3基础---简介和数据
D3.js是一种数据操作类型的javascript库(也可视其为插件):结合HTML,SVG和CSS,D3可以图形化的,生动的展现数据. d3获取:http://d3js.org/ 在代码文件中引入D ...
- d3基础图形模板笔记
散点图(scatter plot): http://bl.ocks.org/weiglemc/6185069 雷达图(radar): http://xgfe.github.io/uploads/che ...
- d3基础入门一-选集、数据绑定等核心概念
引入D3 D3下载,本文下载时的版本为6.5.0 mkdir d3.6.5.0 unzip --help unzip d3.zip -d d3.6.5.0/ ls d3.6.5.0/ API.md C ...
- D3基础入门四-事件处理
6.5.0版 .on("mouseover", function(e,d) e: {"isTrusted":true} 第二个参考才是数据,但这在不同的环境可能 ...
- d3.js读书笔记-2
比例尺 比例尺基本内容 比例尺是一组把输入域映射为输出范围的函数.任意数据集中的值不可能恰好与图表中的像素尺度一一对应.比例尺就是把这些数据值映射为可视化图形中使用的新值的便捷手段.D3的比例尺就是那 ...
- D3树状图给指定特性的边特别显示颜色
D3作为前端图形显示的利器,功能之强,对底层技术细节要求相对比较多. 有一点,就是要理解其基本的数据和节点的匹配规则架构,即enter,update和exit原理,我前面的D3基础篇中有介绍过,不明白 ...
- python之 《pandas》
pandas稍微比numpy处理数据起来还是要慢一点,pandas呢是numpy的升级版,可以说各有所长,numpy的优势是用来处理矩阵,而pandas的优势是处理数表. 1. Series 线性数表 ...
随机推荐
- 深入了解java虚拟机（JVM） 第十章 字节码指令
一.字节码指令的含义 Java字节码指令由一个字节长度的,代表某种特定操作含义的数字(操作码)以及其后的零至多个代表此操作所需参数(操作数).此外字节码指令是面向操作数栈的,这里操作数栈在功能上对应实 ...
- 微信小程序—相对路径和绝对路径
一.绝对路径: 以“/”开头代表根目录, /ada/like/index 二.相对路径 ../../ada/like/index 或者: ada/like/index
- “全栈2019”Java异常第二十章：自定义异常详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...
- iOS中文本属性Attributes
NSFontAttributeName //设置字体大小 NSParagraphStyleAttributeName //设置段落格式 NSForegroundColorAttributeName / ...
- java编码规范_缩进和注释
1. 缩进排版(Indentation) 4个空格常被作为缩进排版的一个单位.缩进的确切解释并未详细指定(空格 vs. 制表符).一个制表符等于n个空格(视具体的编辑器而定,Eclipse ...
- Bootstrap Table使用方法详解
http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...
- AssertJ断言系列-----------<数据库断言三>
其实,是有很多种数据断言的使用.那么,我们在接口的测试中,到底应不应该加上数据库断言呢?我的观点是,视情况而定:某一些特殊的场景或者特殊的业务,那么我们就一定要加上数据库断言.不是我们测试人员,不相信 ...
- Luogu P1351 联合权值 题解
这是一个不错的树形结构的题,由于本蒟蒻不会推什么神奇的公式其实是懒得推...,所以很愉快的发现其实只需要两个点之间的关系为祖父和儿子.或者是兄弟即可. 然后问题就变得很简单了,只需要做一个正常的DFS ...
- opencv 将视频分解成图片和使用本地图片合成视频
代码如下: // cvTest.cpp : Defines the entry point for the console application. #include "stdafx.h&q ...
- 配置bootstrap环境
bootstrap是一个优雅,灵活,可扩展的前端工具集,可搭建WEB页面的HTML,CSS,JavaScript工具集,最重要的是它的栅格系统. 这里不做更多的详细介绍具体可参照官方网站:http:/ ...