1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>动态坐标轴</title>
  6.     <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
  7.     <script type="text/javascript" src="../../lib/d3.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <div class="control-group">
  12.     <button onclick="rescale()">重新生成坐标轴</button>
  13. </div>
  14.  
  15. <script type="text/javascript">
  16.     let height = 500,
  17.         width = 500,
  18.         margin = 30,
  19.         xAxis, yAxis, xAxisLength, yAxisLength;
  20.     xAxisLength = width - 2*margin;
  21.     yAxisLength = height - 2*margin;
  22.  
  23.     //创建一个svg标签画布
  24.     //后面还要创建一个g标签，用于画坐标系
  25.     let svg = d3.select("body").append("svg")
  26.         .attr("class", "axis")
  27.         .attr("width", width)
  28.         .attr("height", height)
  29.         .style("background-color","#cedb9c");
  30.  
  31.     /**
  32.      * 创建坐标轴
         * 一个坐标轴包含：尺度、刻度、相对位置
         * 尺度：一个映射关系，请业务数据映射到画布的线上，所有要有两组数据，一组为业务数据，另外一组则是画布的一个线段
         * 刻度：类似米尺上的刻度，比如一厘米一大格，中间又有一些代表毫米的小格
         * 相对位置：米尺是个实物，而这里的刻度是画在画布上的，就是刻度在画布上的位置
  33.      */
  34.     function renderXAxis() {
  35.         //domain是值就是d3.svg.axis坐标系的x与y的值
  36.         //svg.axis就是业务数据坐标系，其数据是有业务含义的
  37.         //range的值是svg画布像素的长度，意思就是要将业务数据domain画在（映射到）svg画布的指定长度范围内
  38.         let scale = d3.scale.linear()
  39.             .domain([0,100])
  40.             .range([0,xAxisLength]);

  41.         xAxis = d3.svg.axis()
  42.             .scale(scale)
  43.             .tickSubdivide(1)
  44.             .orient("bottom");

            //<sgv class="axis"><g class="x-axis" >...<g class="y-axis" ...
  45.         svg.append("g")
  46.             .attr("class","x-axis")
  47.             .attr("transform",function () {
  48.                 return "translate("+margin+","+(xAxisLength+margin)+")";
  49.             })
  50.             .call(xAxis);
  51.     }
  52.  
  53.     function renderYAxis() {
  54.         let scale = d3.scale.linear()
  55.             .domain([100,0])
  56.             .range([0,yAxisLength])
  57.         yAxis = d3.svg.axis()
  58.             .scale(scale)
  59.             .tickSubdivide(1)
  60.             .orient("left");

  61.         //坐标轴是以svg标签下的g标签为画板的
  62.         svg.append("g")
  63.             .attr("class","y-axis")
  64.             .attr("transform",function () {
  65.                 return "translate("+margin+","+margin+")";
  66.             })
  67.             .call(yAxis);
  68.  
  69.     }
  70.  
  71.     /**
  72.      * X坐标轴对应的网格线对应的两个点
  73.      * 一个是坐标系原点（0,0）
  74.      * 一个是Y轴的终点（0,-yAxisLength）
  75.      */
  76.     function renderXGridLines() {
  77.         //通常坐标重构前都会删除已有的图形，尽管有时它不并存在
  78.         d3.selectAll("g.x-axis g.tick")
  79.             .select("line.grid-line")
  80.             .remove();
  81.         //然后重新选取新的图形
  82.         let lines = d3.selectAll("g.x-axis g.tick")
  83.             .append("line")
  84.             .classed("grid-line",true);
  85.  
  86.         //图形中涉及的坐标系是SVG坐标系，上负下正，右正
  87.         lines.attr("x1",0)
  88.             .attr("y1",0)
  89.             .attr("x2",0)
  90.             .attr("y2",-yAxisLength);
  91.     }
  92.  
  93.     /**
  94.      * Y坐标轴对应的网格线对应的两个点
  95.      * 一个是坐标系原点（0,0）
  96.      * 一个是X轴的终点（xAxisLength,0）
  97.      */
  98.     function renderYGridLines() {
  99.         //通常坐标重构前都会删除已有的图形，尽管有时它不并存在
  100.         d3.selectAll("g.y-axis g.tick")
  101.             .select("line.grid-line")
  102.             .remove();
  103.         //然后重新选取新的图形
  104.         let lines = d3.selectAll("g.y-axis g.tick")
  105.             .append("line")
  106.             .classed("grid-line",true);
  107.  
  108.         lines.attr("x1",0)
  109.             .attr("y1",0)
  110.             .attr("x2",xAxisLength)
  111.             .attr("y2",0);
  112.     }
  113.  
  114.     /**
  115.      * 通过改变坐标轴的尺度来重构坐标系
  116.      */
  117.     function rescale() {
  118.         let max = Math.round(Math.random()*100);
  119.         let duration = 5000;
  120.         xAxis.scale().domain([0,max]);
  121.  
  122.         //构建坐标轴会在g标签中添加class为tick的g标签，删除这个就相当于删除了坐标轴
  123.         //call方法中会自动删除，所以这里不需要这一步了
  124.         // d3.selectAll("g.x-axis g.tick")
  125.         //     .remove();
  126.  
  127.         d3.select("g.x-axis")
  128.             .transition()
  129.             .duration(duration)
  130.             .call(xAxis);
  131.  
  132.         yAxis.scale().domain([max,0]);
  133.         d3.select("g.y-axis")
  134.             .transition()
  135.             .duration(duration)
  136.             .call(yAxis);
  137.  
  138.         renderXGridLines();
  139.         renderYGridLines();
  140.     }
  141.  
  142.     renderXAxis();
  143.     renderYAxis();
  144.     renderXGridLines();
  145.     renderYGridLines();
  146.  
  147. </script>
  148. </body>
  149. </html>

附css样式 css/styles.css

  1. body {
  2.     font-family: "helvetica";
  3. }
  4.  
  5. button {
  6.     margin: 0 7px 0 0;
  7.     background-color: #f5f5f5;
  8.     border: 1px solid #dedede;
  9.     border-top: 1px solid #eee;
  10.     border-left: 1px solid #eee;
  11.  
  12.     font-size: 12px;
  13.     line-height: 130%;
  14.     text-decoration: none;
  15.     font-weight: bold;
  16.     color: #565656;
  17.     cursor: pointer;
  18. }
  19.  
  20. .box {
  21.     width: 200px;
  22.     height: 200px;
  23.     margin: 40px;
  24.     float: left;
  25.     text-align: center;
  26.     border: #969696 solid thin;
  27.     padding: 5px;
  28. }
  29.  
  30. .red {
  31.     background-color: #e9967a;
  32.     color: #f0f8ff;
  33. }
  34.  
  35. .blue {
  36.     background-color: #add8e6;
  37.     color: #f0f8ff;
  38. }
  39.  
  40. .cell {
  41.     min-width: 40px;
  42.     min-height: 20px;
  43.     margin: 5px;
  44.     float: left;
  45.     text-align: center;
  46.     border: #969696 solid thin;
  47.     padding: 5px;
  48. }
  49.  
  50. .fixed-cell {
  51.     min-width: 40px;
  52.     min-height: 20px;
  53.     margin: 5px;
  54.     position: fixed;
  55.     text-align: center;
  56.     border: #969696 solid thin;
  57.     padding: 5px;
  58. }
  59.  
  60. .h-bar {
  61.     min-height: 15px;
  62.     min-width: 10px;
  63.     background-color: steelblue;
  64.     margin-bottom: 2px;
  65.     font-size: 11px;
  66.     color: #f0f8ff;
  67.     text-align: right;
  68.     padding-right: 2px;
  69. }
  70.  
  71. .v-bar {
  72.     min-height: 1px;
  73.     min-width: 30px;
  74.     background-color: #4682b4;
  75.     margin-right: 2px;
  76.     font-size: 10px;
  77.     color: #f0f8ff;
  78.     text-align: center;
  79.     width: 10px;
  80.     display: inline-block;
  81. }
  82.  
  83. .baseline {
  84.     height: 1px;
  85.     background-color: black;
  86. }
  87.  
  88. .clear {
  89.     clear: both;
  90. }
  91.  
  92. .selected {
  93.     background-color: #f08080;
  94. }
  95.  
  96. .control-group {
  97.     padding-top: 10px;
  98.     margin: 10px;
  99. }
  100.  
  101. .table {
  102.     width: 70%;
  103. }
  104.  
  105. .table td, th {
  106.     padding: 5px;
  107. }
  108.  
  109. .table-header {
  110.     background-color: #00AFEF;
  111.     font-weight: bold;
  112. }
  113.  
  114. .table-row-odd {
  115.     background-color: #f0f8ff;
  116. }
  117.  
  118. .table-row-odd {
  119.     background-color: #d3d3d3;
  120. }
  121.  
  122. .code {
  123.     display: inline-block;
  124.     font-style: italic;
  125.     background-color: #d3d3d3;
  126.     border: #969696 solid thin;
  127.     padding: 10px;
  128.     margin-top: 10px;
  129.     margin-bottom: 10px;
  130. }
  131.  
  132. .countdown{
  133.     width: 150px;
  134.     height: 150px;
  135.     font-size: 5em;
  136.     font-weight: bold;
  137. }
  138.  
  139. .axis path, .axis line {
  140.     fill: none;
  141.     stroke: #000;
  142.     shape-rendering: crispEdges;
  143. }
  144.  
  145. .axis text {
  146.     font: 10px sans-serif;
  147. }
  148.  
  149. .axis .grid-line{
  150.     stroke: black;
  151.     shape-rendering: crispEdges;
  152.     stroke-opacity: .2;
  153. }
  154.  
  155. .line{
  156.     fill: none;
  157.     stroke: steelblue;
  158.     stroke-width: 2;
  159. }
  160.  
  161. .dot {
  162.   fill: #fff;
  163.   stroke: steelblue;
  164. }
  165.  
  166. .area {
  167.     stroke: none;
  168.     fill: steelblue;
  169.     fill-opacity: .2;
  170. }
  171.  
  172. .pie text{
  173.     fill: white;
  174.     font-weight: bold;
  175. }
  176.  
  177. .circle {
  178.     stroke: none;
  179.     fill: red;
  180.     fill-opacity: .7;
  181. }
  182.  
  183. .cross {
  184.     stroke: none;
  185.     fill: blue;
  186.     fill-opacity: .7;
  187. }
  188.  
  189. .diamond {
  190.     stroke: none;
  191.     fill: green;
  192.     fill-opacity: .7;
  193. }
  194.  
  195. .square{
  196.     stroke: none;
  197.     fill: yellow;
  198.     fill-opacity: .7;
  199. }
  200.  
  201. .triangle-down{
  202.     stroke: none;
  203.     fill: blueviolet;
  204.     fill-opacity: .7;
  205. }
  206.  
  207. .triangle-up{
  208.     stroke: none;
  209.     fill: darkred;
  210.     fill-opacity: .7;
  211. }
  212.  
  213. .bubble{
  214.     fill-opacity: .3;
  215. }
  216.  
  217. .bar{
  218.     stroke: none;
  219.     fill: steelblue;
  220. }

d3动态坐标轴的更多相关文章

  1. D3.js 坐标轴

    坐标轴,是可视化图表中经常出现的一种图形,由一些列线段和刻度组成.坐标轴在 SVG 中是没有现成的图形元素的,需要用其他的元素组合构成. D3 提供了坐标轴的组件,如此在 SVG 画布中绘制坐标轴变得 ...

  2. 129_Power Pivot&Power BI DAX不同维度动态展示&动态坐标轴

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 某天在和那还是叫我大铁吧 交流关于季度&月度同时展示的问题,感概中国式报表真的需求很微妙. 下面来看看到 ...

  3. D3.js坐标轴的绘制方法、添加坐标轴的刻度和各比例尺的坐标轴(V3版本)

    坐标轴(Axis)   坐标轴(Axis)在很多图表中都可见到,例如柱形图.折线图.散点图等.坐标轴由一组线段和文字组成,坐标轴上的点由一个坐标值确定.但是,如果使用SVG的直线和文字一笔一画的绘制坐 ...

  4. 数据可视化之powerBI技巧（十三）PowerBI作图技巧：动态坐标轴

    之前的文章中介绍了如何制作动态的分析指标,这篇进行文章再介绍一下如何制作动态的坐标轴. 假设要分析的数据为销售额,分别从产品和地区两个维度进行分析,要实现的效果是,如果选择的是产品,则坐标轴是各个产品 ...

  5. D3.js：坐标轴

    坐标轴: 是可视化图表中经常出现的一种图形,由一些列线段和刻度组成.坐标轴在 SVG 中是没有现成的图形元素的,需要用其他的元素组合构成.D3 提供了坐标轴的组件,如此在 SVG 画布中绘制坐标轴变得 ...

  6. D3(v5) in TypeScript 坐标轴之 scaleBand用法

    在学习d3时候,发现在TS中实现D3的坐标轴中遇到一些错误,而这些错误却不会存在于js(因为ts的类型检查)写法中,因此做下笔记: import * as d3 from 'd3';import * ...

  7. D3.js系列——比例尺和坐标轴

    比例尺是 D3 中很重要的一个概念.绘制图形时直接用数值的大小来代表像素不是一种好方法,本章正是要解决此问题. 一.为什么需要比例尺 上一章制作了一个柱形图,当时有一个数组,绘图时,直接使用 250 ...

  8. 初识 D3.js ：打造专属可视化

    一.前言 随着现在自定义可视化的需求日益增长,Highcharts.echarts等高度封装的可视化框架已经无法满足用户各种强定制性的可视化需求了,这个时候D3的无限定制的能力就脱颖而出. 如果想要通 ...

  9. D3.js学习（一）

    从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...

随机推荐

  1. 多线程 | 03 | CAS机制

    Compare and swap(CAS) 当前的处理器基本都支持CAS,只不过每个厂家所实现的算法并不一样罢了,每一个CAS操作过程都包含三个参数:一个内存地址V,一个期望的值A和一个新值B,操作的 ...

  2. 前端调试工具（DevTools）

    前端调试工具(DevTools) 开启:F12 布局 切换PC和移动端 页面元素的快速测试技巧 保持元素的hover等状态:选中当前行点击右键 元素状态改变的监控技巧 触发断点后元素状态不会再改变,可 ...

  3. js实现一个小游戏（飞翔的jj）

    js实现一个小游戏(飞翔的jj) 源代码+素材图片在我的仓库 <!DOCTYPE html> <html lang="en"> <head> & ...

  4. 数据库炸了----我就重启了一下啊（Communications link failure）

    重启数据库后,数据库大部分时间连不上了:连续请求不会报错,请求间隔时间稍微长一点就会报错报错如图: com.mysql.cj.jdbc.exceptions.CommunicationsExcepti ...

  5. storm启动报错： InvalidTopologyException(msg:Component: [mybolt] subscribes from non-existent stream: [default] of component [es-bolt])

    storm每一个bolt在emit之后需要把数据传递到下一个bolt,所以declareOUtputFields 一定要写 默认的情况下不用加streamId,如果加了streamId,后面的bolt ...

  6. MySQL基础语句（查询）

    students表 id class_id name gender score 1 1 小明 M 90 2 1 小红 F 95 3 1 小军 M 88 4 1 小米 F 73 5 2 小白 F 81 ...

  7. Python基础（返回函数）

    #我们在函数lazy_sum中又定义了函数f1,并且,内部函数f1可以引用外部函数lazy_sum的参数和局部变量,当lazy_sum返回函数f1时,相关参数和变量都保存在返回的函数中,这种称为&qu ...

  8. js中修改this指向的方法（call，apply，bind）

    前言:call.apply和bind都是为了改变某个函数运行时的this指向的,对于前端人员来说,关于this的掌握程度,直接决定了前端水平的高低.下面我们就来简单浅显易懂的来看一下es5中常用的三种 ...

  9. jsonpath解析淘票票，所有购票的城市

    解决一些反爬,校验. 复制所有请求头 import urllib.request # 请求url url = 'https://dianying.taobao.com/cityAction.json? ...

  10. xpath解析案例

    xpath解析百度页面的百度一下 # 1)获取网页的源码 # 2)解析的服务器响应的文件 etree.HTML , 用来解析字符串格式的HTML文档对象,将传进去的字符串转变成 element 对象 ...