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 线性数表 ...
随机推荐
- 2018 OCP 052最新题库及答案-4
4.For which requirement should you configure shared servers? A) accommodating an increasing number o ...
- 关于CocoaPods添加第三方库造成项目崩溃
在很多时候,我们接手了别人的代码,项目中已经使用cocoapods,但是再想通过pods添加第三方库时会造成崩溃,如果你没备份项目的话那你就悲催了,幸好当初用了git了,不然又够忙乎的了. 好,回到正 ...
- 【timeisprecious】【JavaScript 】JavaScript RegExp 对象
JavaScript>RegExp正则表达式 1 .From Runnob JavaScript RegExp 对象(概览) JavaScript RegExp 对象(教程) RegExp 对象 ...
- CF1109DSasha and Interesting Fact from Graph Theory（数数）
题面 传送门 前置芝士 Prufer codes与Generalized Cayley's Formula 题解 不行了脑子已经咕咕了连这么简单的数数题都不会了-- 首先这两个特殊点到底是啥并没有影响 ...
- WebLogic “Java 反序列化”过程远程命令执行
WebLogic “Java 反序列化”过程远程命令执行 详细信息: https://www.seebug.org/vuldb/ssvid-89726 说明: 反序列化是指特定语言中将传递的对象序列化 ...
- 给对象和函数添加method方法
蝴蝶书中有一个method方法,用来给函数定义方法.看了之后,想着能不能给对象也定义方法呢?. 下面的代码可以实现给函数定义方法: //Function method Function.prototy ...
- 聊聊Postgres中的IPC之SI Message Queue
在 PostgreSQL中,每一个进程都有属于自己的共享缓存(shared cache).例如,同一个系统表在不同的进程中都有对应的Cache来缓存它的元组(对于RelCache来说缓存的是一个Rel ...
- 【Quartz】一个小Demo
Quartz是一个优秀的框架,功能强大,用法简单,比如说下面这个例子. (1)引入Jar包 <!-- quartz 模块 --> <dependency> <groupI ...
- JVM调优总结 -Xms -Xmx -Xmn -Xss（转自：iteye unixboy）
堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统下,一般限制在1.5G~2G:64为操作 ...
- 丢用lamp手动安装apache php mysql
Centos7环境下. 使用lamp环境无法正常显示出thinkphp站点的内容,一气之下,选择手动安装 第一步: 安装apache php 和php连接数据库的工具php-mysql [root@ ...