坐标轴的绘制我们需要搞清楚以下三个要点：

1）、axis函数

2）、.call()函数用于组合

3）、坐标轴的平移旋转

关于第三点其实就是"transform","translate(X,Y)"的含义和效果结合自己要求进行使用。

<html>

<head>

    <meta charset="utf-8">

    <title>坐标轴</title>  

    <style>

    .axis path,

    .axis line{

        fill: none;

        stroke: skyblue;

        shape-rendering: crispEdges;

  stroke-width: 3px;

    }

    .axis text {

        font-family: sans-serif;

        font-size: 11px;

    }

    .MyPath {

        fill: none;

        stroke: darkred;

        stroke-width: 2px;

    }

    </style>

</head>

<body>

<script src="https://cdn.bootcss.com/d3/3.5.15/d3.js"></script>

<script>

var svg = d3.select("body")

   .append("svg")

            .attr("width", 400)

            .attr("height", 400);//向body中添加了一个svg元素

// 自定义数据

var data = [12,25,28,56,96,56,45,78];

//定义比例尺

    var xScale = d3.scale.linear()

                    .domain([0, data.length-1])

                    .range([0, 300]);

    var yScale = d3.scale.linear()

                    .domain([0, d3.max(data)])

                    .range([250, 0]);

 //使用axis函数来生成坐标轴的组合元素

    var xAxis = d3.svg.axis()

                .scale(xScale)//坐标轴联立刻度尺,用于缩放

                .orient("bottom");//该函数指定坐标轴刻度的方向

 var yAxis = d3.svg.axis()

                 .scale(yScale)

                 .orient("left");

 //插入坐标轴

    var gxAxis = svg.append("g")//添加一个g(group)元素,用于存放坐标轴的元素

                    .attr("class","axis")//添加一个类（类名叫axis）,用于修饰坐标轴//其实无影响(非必需代码）)

                    .attr("transform","translate(30,350)")

                    .call(xAxis);//添加x轴(关键代码，不可省略)

    var gyAxis = svg.append("g")

                    .attr("class","axis")

                    .attr("transform","translate(30,100)")

                    .call(yAxis);

 // //上面的代码还可以怎么写呢,其实完全可以这样来写

 // var xAxis = d3.svg.axis()

 //    .scale(xScale);

 // var yAxis = d3.svg.axis()

 //    .orient("left")

 //    .scale(yScale);

 // //不定义直接添加也是可以的

 // svg.append("g")

 //  .attr("transform","translate(30,350)")

 //  .call(xAxis);

 // svg.append("g")

 //  .attr("transform","translate(30,100)")

 //  .call(yAxis);

    //  线段生成器

    var line = d3.svg.line()

            .x( function(d,i){ return xScale(i); } )

            .y( function(d){ return yScale(d); } )

            .interpolate("cardinal");

    // 折线图

    svg.append("path")

        .attr("class","MyPath")

        .attr("d", line(data) )

        .attr("transform","translate(30,100)");

</script>

</body>

</html>

D3学习之坐标系绘制的更多相关文章

  1. WPF3D学习,立方体的绘制

    原文:WPF3D学习,立方体的绘制 以此为一个好的开始吧!一直都太懒,坚持写文章是个不错的开始!碰巧最近在研究WPF3D这块的知识,也为了练练自己的写作水平,整理这篇文章.新手上路,多多关照! 本文先 ...

  2. D3学习笔记一

    D3学习笔记一 什么是D3? D3(全称Data Driven Documents)是一个用来做Web数据可视化的JavaScript函数库.D3也称之为D3.js. D3是2011年由Mike Bo ...

  3. D3学习之地图

    D3学习之地图 (2017.03.09-03.11) 地图的意义 在可视化领域中,将数据点投影和关联到地理区域上,是一个非常关键的内容(体现了可视化中利用读者自身知识常识从而加速吸收信息的原则). G ...

  4. D3 学习

    D3 学习笔记 D3简介 D3全称是Data-Driven Documents数据驱动文档,是一个开源的javascript库,可以用于数据可视化图形的创建,但不仅仅只是这些.可以查看d3帮助文档还有 ...

  5. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  6. iOS学习——Quartz2D学习之UIKit绘制

    iOS学习——Quartz2D学习之UIKit绘制 1.总述 在IOS中绘图技术主要包括:UIKit.Quartz 2D.Core Animation和OpenGL ES.其中Core Animati ...

  7. D3学习之动画和变换

    D3学习之动画和变换 ##(17.02.27-02.28) 主要学习到了D3对动画和缓动函数的一些应用,结合前面的选择器.监听事件.自定义插值器等,拓展了动画的效果和样式. 主要内容 单元素动画 多元 ...

  8. OpenGL入门学习 课程 (三) 绘制几何图形的一些细节问题

    http://oulehui.blog.163.com/blog/static/79614698201191832753312/ 先回顾一下我们都学习了些什么: 第一课,编写第一个OpenGL程序第二 ...

  9. D3力布图绘制--节点自己连自己的实现

    案例分析 先看下实现的效果图 实现方法 本篇是在之前写的博文 D3力布图绘制--节点间的多条关系连接线的方法 基础上加修改的,这里放上修改的代码,其他的一样 // DATA var nodes = [ ...

随机推荐

  1. 洛谷 P1600 天天爱跑步（LCA+乱搞）

    传送门 我们把每一条路径拆成$u->lca$和$lca->v$的路径 先考虑$u->lca$,如果这条路径会对路径上的某一个点产生贡献,那么满足$dep[u]-dep[x]=w[x] ...

  2. Codeforces Round #587 (Div. 3) D. Swords

    链接: https://codeforces.com/contest/1216/problem/D 题意: There were n types of swords in the theater ba ...

  3. 外观模式（Facade）---结构型模式

    1 基础知识 定义:提供了一个统一的接口(外观类),用来访问子系统中的一群接口.特征:定义了一个高层接口让子系统更容易使用,减少了外部与子系统内多个模块的耦合. 本质:封装交互,简化调用. 优点:简化 ...

  4. luogu 2294 [HNOI2005]狡猾的商人 差分约束

    一个差分约束模型,只需判一下有没有负环即可. #include <bits/stdc++.h> #define N 103 #define M 2004 #define setIO(s) ...

  5. Python GUI编程(Tkinter)（一）

    tk官网的教程学习: https://tkdocs.com/tutorial/firstexample.html 学习blog: https://www.cnblogs.com/aland-1415/ ...

  6. Ubuntu16.04从源码部署安装禅道过程记录

    1.首先把基础的lamp环境搭建好,这里利用apt安装即可 sudo apt install mysql-server sudo apt install apache2 sudo apt instal ...

  7. JavaWeb_(Hibernate框架)Hibernate论坛项目中多对多案例

    基于SSH论坛小型项目 传送门 用户和发帖进行举例 多对多关系:多个用户可以回复多个帖子 因此引入了一张回复表,用来保存用户id和帖子id CREATE TABLE `hforum`.`answer` ...

  8. Linux Redis的性能展示

    我们可以通过redis-cli 连接上redis ,例如 : redis-cli -h 127.0.0.1 -p 6379 连接上redis,然后通过INFO查看redis的一些信息.我们可以查看一些 ...

  9. 【Eureka】 作为服务注册中心，Eureka比Zookeeper好在哪里

    著名的 CAP 理论指出,一个分布式系统不可能同时满足 C(一致性) A(可用性) 和 P(分区容错性).由于分区容错性 P 是在分布式系统中必须保证的,因此我们只能在 A 和 C 之间进行权衡. Z ...

  10. git status： HEAD detached from origin/master问题的解决

    问题:执行git status,提示: HEAD detached from origin/master 原因:分支选错了,后续的提交都提交到了一个匿名分支之上,整个状态是游离了的 解决方法: 1.查 ...