d3动态坐标轴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态坐标轴</title>
<link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
<script type="text/javascript" src="../../lib/d3.js"></script>
</head>
<body> <div class="control-group">
<button onclick="rescale()">重新生成坐标轴</button>
</div> <script type="text/javascript">
let height = 500,
width = 500,
margin = 30,
xAxis, yAxis, xAxisLength, yAxisLength;
xAxisLength = width - 2*margin;
yAxisLength = height - 2*margin; //创建一个svg标签画布
//后面还要创建一个g标签，用于画坐标系
let svg = d3.select("body").append("svg")
.attr("class", "axis")
.attr("width", width)
.attr("height", height)
.style("background-color","#cedb9c"); /**
* 创建坐标轴
* 一个坐标轴包含：尺度、刻度、相对位置
* 尺度：一个映射关系，请业务数据映射到画布的线上，所有要有两组数据，一组为业务数据，另外一组则是画布的一个线段
* 刻度：类似米尺上的刻度，比如一厘米一大格，中间又有一些代表毫米的小格
* 相对位置：米尺是个实物，而这里的刻度是画在画布上的，就是刻度在画布上的位置
*/
function renderXAxis() {
//domain是值就是d3.svg.axis坐标系的x与y的值
//svg.axis就是业务数据坐标系，其数据是有业务含义的
//range的值是svg画布像素的长度，意思就是要将业务数据domain画在（映射到）svg画布的指定长度范围内
let scale = d3.scale.linear()
.domain([0,100])
.range([0,xAxisLength]);
xAxis = d3.svg.axis()
.scale(scale)
.tickSubdivide(1)
.orient("bottom");
//<sgv class="axis"><g class="x-axis" >...<g class="y-axis" ...
svg.append("g")
.attr("class","x-axis")
.attr("transform",function () {
return "translate("+margin+","+(xAxisLength+margin)+")";
})
.call(xAxis);
} function renderYAxis() {
let scale = d3.scale.linear()
.domain([100,0])
.range([0,yAxisLength])
yAxis = d3.svg.axis()
.scale(scale)
.tickSubdivide(1)
.orient("left");
//坐标轴是以svg标签下的g标签为画板的
svg.append("g")
.attr("class","y-axis")
.attr("transform",function () {
return "translate("+margin+","+margin+")";
})
.call(yAxis); } /**
* X坐标轴对应的网格线对应的两个点
* 一个是坐标系原点（0,0）
* 一个是Y轴的终点（0,-yAxisLength）
*/
function renderXGridLines() {
//通常坐标重构前都会删除已有的图形，尽管有时它不并存在
d3.selectAll("g.x-axis g.tick")
.select("line.grid-line")
.remove();
//然后重新选取新的图形
let lines = d3.selectAll("g.x-axis g.tick")
.append("line")
.classed("grid-line",true); //图形中涉及的坐标系是SVG坐标系，上负下正，右正
lines.attr("x1",0)
.attr("y1",0)
.attr("x2",0)
.attr("y2",-yAxisLength);
} /**
* Y坐标轴对应的网格线对应的两个点
* 一个是坐标系原点（0,0）
* 一个是X轴的终点（xAxisLength,0）
*/
function renderYGridLines() {
//通常坐标重构前都会删除已有的图形，尽管有时它不并存在
d3.selectAll("g.y-axis g.tick")
.select("line.grid-line")
.remove();
//然后重新选取新的图形
let lines = d3.selectAll("g.y-axis g.tick")
.append("line")
.classed("grid-line",true); lines.attr("x1",0)
.attr("y1",0)
.attr("x2",xAxisLength)
.attr("y2",0);
} /**
* 通过改变坐标轴的尺度来重构坐标系
*/
function rescale() {
let max = Math.round(Math.random()*100);
let duration = 5000;
xAxis.scale().domain([0,max]); //构建坐标轴会在g标签中添加class为tick的g标签，删除这个就相当于删除了坐标轴
//call方法中会自动删除，所以这里不需要这一步了
// d3.selectAll("g.x-axis g.tick")
// .remove(); d3.select("g.x-axis")
.transition()
.duration(duration)
.call(xAxis); yAxis.scale().domain([max,0]);
d3.select("g.y-axis")
.transition()
.duration(duration)
.call(yAxis); renderXGridLines();
renderYGridLines();
} renderXAxis();
renderYAxis();
renderXGridLines();
renderYGridLines(); </script>
</body>
</html>
附css样式 css/styles.css
body {
font-family: "helvetica";
}
button {
margin: 0 7px 0 0;
background-color: #f5f5f5;
border: 1px solid #dedede;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
font-size: 12px;
line-height: 130%;
text-decoration: none;
font-weight: bold;
color: #565656;
cursor: pointer;
}
.box {
width: 200px;
height: 200px;
margin: 40px;
float: left;
text-align: center;
border: #969696 solid thin;
padding: 5px;
}
.red {
background-color: #e9967a;
color: #f0f8ff;
}
.blue {
background-color: #add8e6;
color: #f0f8ff;
}
.cell {
min-width: 40px;
min-height: 20px;
margin: 5px;
float: left;
text-align: center;
border: #969696 solid thin;
padding: 5px;
}
.fixed-cell {
min-width: 40px;
min-height: 20px;
margin: 5px;
position: fixed;
text-align: center;
border: #969696 solid thin;
padding: 5px;
}
.h-bar {
min-height: 15px;
min-width: 10px;
background-color: steelblue;
margin-bottom: 2px;
font-size: 11px;
color: #f0f8ff;
text-align: right;
padding-right: 2px;
}
.v-bar {
min-height: 1px;
min-width: 30px;
background-color: #4682b4;
margin-right: 2px;
font-size: 10px;
color: #f0f8ff;
text-align: center;
width: 10px;
display: inline-block;
}
.baseline {
height: 1px;
background-color: black;
}
.clear {
clear: both;
}
.selected {
background-color: #f08080;
}
.control-group {
padding-top: 10px;
margin: 10px;
}
.table {
width: 70%;
}
.table td, th {
padding: 5px;
}
.table-header {
background-color: #00AFEF;
font-weight: bold;
}
.table-row-odd {
background-color: #f0f8ff;
}
.table-row-odd {
background-color: #d3d3d3;
}
.code {
display: inline-block;
font-style: italic;
background-color: #d3d3d3;
border: #969696 solid thin;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.countdown{
width: 150px;
height: 150px;
font-size: 5em;
font-weight: bold;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
font: 10px sans-serif;
}
.axis .grid-line{
stroke: black;
shape-rendering: crispEdges;
stroke-opacity: .2;
}
.line{
fill: none;
stroke: steelblue;
stroke-width: 2;
}
.dot {
fill: #fff;
stroke: steelblue;
}
.area {
stroke: none;
fill: steelblue;
fill-opacity: .2;
}
.pie text{
fill: white;
font-weight: bold;
}
.circle {
stroke: none;
fill: red;
fill-opacity: .7;
}
.cross {
stroke: none;
fill: blue;
fill-opacity: .7;
}
.diamond {
stroke: none;
fill: green;
fill-opacity: .7;
}
.square{
stroke: none;
fill: yellow;
fill-opacity: .7;
}
.triangle-down{
stroke: none;
fill: blueviolet;
fill-opacity: .7;
}
.triangle-up{
stroke: none;
fill: darkred;
fill-opacity: .7;
}
.bubble{
fill-opacity: .3;
}
.bar{
stroke: none;
fill: steelblue;
}
d3动态坐标轴的更多相关文章
- D3.js 坐标轴
坐标轴,是可视化图表中经常出现的一种图形,由一些列线段和刻度组成.坐标轴在 SVG 中是没有现成的图形元素的,需要用其他的元素组合构成. D3 提供了坐标轴的组件,如此在 SVG 画布中绘制坐标轴变得 ...
- 129_Power Pivot&Power BI DAX不同维度动态展示&动态坐标轴
博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 某天在和那还是叫我大铁吧 交流关于季度&月度同时展示的问题,感概中国式报表真的需求很微妙. 下面来看看到 ...
- D3.js坐标轴的绘制方法、添加坐标轴的刻度和各比例尺的坐标轴(V3版本)
坐标轴(Axis) 坐标轴(Axis)在很多图表中都可见到,例如柱形图.折线图.散点图等.坐标轴由一组线段和文字组成,坐标轴上的点由一个坐标值确定.但是,如果使用SVG的直线和文字一笔一画的绘制坐 ...
- 数据可视化之powerBI技巧（十三）PowerBI作图技巧：动态坐标轴
之前的文章中介绍了如何制作动态的分析指标,这篇进行文章再介绍一下如何制作动态的坐标轴. 假设要分析的数据为销售额,分别从产品和地区两个维度进行分析,要实现的效果是,如果选择的是产品,则坐标轴是各个产品 ...
- D3.js：坐标轴
坐标轴: 是可视化图表中经常出现的一种图形,由一些列线段和刻度组成.坐标轴在 SVG 中是没有现成的图形元素的,需要用其他的元素组合构成.D3 提供了坐标轴的组件,如此在 SVG 画布中绘制坐标轴变得 ...
- D3(v5) in TypeScript 坐标轴之 scaleBand用法
在学习d3时候,发现在TS中实现D3的坐标轴中遇到一些错误,而这些错误却不会存在于js(因为ts的类型检查)写法中,因此做下笔记: import * as d3 from 'd3';import * ...
- D3.js系列——比例尺和坐标轴
比例尺是 D3 中很重要的一个概念.绘制图形时直接用数值的大小来代表像素不是一种好方法,本章正是要解决此问题. 一.为什么需要比例尺 上一章制作了一个柱形图,当时有一个数组,绘图时,直接使用 250 ...
- 初识 D3.js ：打造专属可视化
一.前言 随着现在自定义可视化的需求日益增长,Highcharts.echarts等高度封装的可视化框架已经无法满足用户各种强定制性的可视化需求了,这个时候D3的无限定制的能力就脱颖而出. 如果想要通 ...
- D3.js学习（一）
从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...
随机推荐
- 【python+postman接口自动化测试】（1）网络基础知识
一.IP地址 就像每个人都有一个身份证号码 IP地址是IP协议提供的一种统一的地址格式,它为互联网上的每一个网络和每一台主机分配一个逻辑地址. 查看IP命令: Windows: ipconfig Li ...
- VIM处理工具与正则表达式
*本文中/data目录为训练目录 1.在vim中设置TAB缩进为四个字符 打开vim 输入:set tabstop=4 2.复制/etc/rc.d/init.d/functions文件至/tmp/,替 ...
- Mysql - 如何决定用 datetime、timestamp、int 哪种类型存储时间戳？
背景 数据表都很可能会有一两个字段需要保存日期时间数据,那应该用什么 Mysql 类型来保存呢? 前面讲过 datetime.timestamp.int 的方式来保存日期时间 如何存储 10位.13位 ...
- 菜鸡的Java笔记 第九 - java 接收键盘输入
package mysterious; import java.util.Scanner; public class lianxi { public static void hhh (){ Scann ...
- 物联网3D，物业基础设施3D运维，使用webgl(three.js)与物联网设备结合案例。搭建智慧楼宇，智慧园区，3D园区、3D物业设施，3D楼宇管理系统——第八课
写在前面的废话: 很久没有更新文章了,这段时间一直忙于项目落地,虽然很忙,但是感觉没有总结,没有提炼的日子,总是让人感觉飘飘忽忽的. 所幸放下一些事,抽出一些时间,把近期的项目做一些整理与记录.也算是 ...
- 从华为新发布的WeAutomate 3.0，看RPA如何在政企领域落地生长
文/王吉伟 11月11日,是电商的重要节日.即便今年双11的气氛不如往年浓烈,人们依旧关注双11厂商战报,关注购物车里的商品有没有降价. 当然在RPA领域,大家除了关注双11的商品价格,更关注华为RP ...
- Go语言核心36讲（Go语言实战与应用九）--学习笔记
31 | sync.WaitGroup和sync.Once 我们在前几次讲的互斥锁.条件变量和原子操作都是最基本重要的同步工具.在 Go 语言中,除了通道之外,它们也算是最为常用的并发安全工具了. 说 ...
- [luogu5361]热闹的聚会与尴尬的聚会
由于两者是独立的,我们希望两者的$p$和$q$都最大 考虑最大的$p$,先全部邀请,此时要增大$p$显然必须要删去当前度数最小的点,不断删除之后将每一次度数最小值对答案取max即可 对于$q$也即最大 ...
- [bzoj1263]整数划分
观察样例,令f(n)表示n拆分的答案,猜想$f(n)=3f(n-3)$,当$n\le 4$时$f(n)=n$取3的原因是因为对于给定的$x+y$,当$4<x+y$,显然有$3^{x+y-3}$最 ...
- vue实现聊天+图片表情功能
项目需求是这样的:要求实现类似于微信聊天一样,表情+文字效果 "文字效果" 表情包三种方案 表情包的实现其实可以分为以下三种情况: 表情包:点击表情--直接发送大表情(这种方案其实 ...