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

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. MFC 用户登录、注册、工作主窗体

    创建项目由向导生成的窗体作为工作的主窗体.用户登录.注册窗体添加对话框来实现. [具体功能] 1.主窗体应该出现在登录窗体成功之后. 2.登录窗体关闭(右上角❌),程序直接退出. 在App.cpp的I ...

  2. 我关了solution并且删掉个sln.DotSettings.user后似乎也可以了

    "Go To Definition" is disabled in Visual Studio http://social.msdn.microsoft.com/Forums/en ...

  3. git branch/meger step(3)

    # update last repositories git pull git log # create yourself repositories base on last repositories ...

  4. [python]有中文字符程序异常的解决方案

    一. 含有中文字符无法运行 在python3中用的是Unicode编码,Unicode号称万国码,可以向所有的编码进行兼容.不会出现这种问题. Python2中使用的是ASCII编码,会出现这种问题. ...

  5. wgs84 转百度经纬度坐标

    /** * wgs84 转百度地图坐标 * @param $lng * @param $lat * @return array */ function toBaiduLocation($lng,$la ...

  6. java中判断空字符串和null的判断方法

    简单总结几个方法: 1.直观的: if(s == null ||"".equals(s)); //先判断是否对象,再判断是否是空字符串 2.比较字符串长度, 效率高, 比较绕: i ...

  7. Docker搭建ELK分析tomat日志

    最近公司的项目中用到了ELK,正好有时间自己搭建一个学习一下.在实体机或虚拟机中搭建还需要安装软件,使用docker镜像安装是省时省力的,如下是步骤. 1. 下载elasticsearch镜像: #d ...

  8. 【SR汇总】基于深度学习方法

    1.SRCNN.FSRCNN (Learning a Deep Convolutional Network for Image Super-Resolution, ECCV2014) (Acceler ...

  9. LC 241. Different Ways to Add Parentheses

    Given a string of numbers and operators, return all possible results from computing all the differen ...

  10. vuex中的babel编译mapGetters/mapActions报错解决方法

    vex使用...mapActions报错解决办法 vuex2增加了mapGetters和mapActions的方法,借助stage2的Object Rest Operator 所在通过 methods ...