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

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. jQuery 查找父节点 parents()与closest()

    parents()由内向外,直到最高的父节点停止查找,返回的父节点是多个 closest()由内向外查找,当找到符合规则的一个,则不再查找,返回的是0或1个

  2. C# WebClient 的文件上传下载

    上传文件 string path = openFileDialog1.FileName; WebClient wc = new WebClient(); wc.Credentials = Creden ...

  3. mysql数据库的主从同步，实现读写分离

    大型网站为了软解大量的并发访问,除了在网站实现分布式负载均衡,远远不够.到了数据业务层.数据访问层,如果还是传统的数据结构,或者只是单单靠一台服务器来处理如此多的数据库连接操作,数据库必然会崩溃,特别 ...

  4. 转：JSON Assertion 适用于json格式的响应断言

    当响应结果是json格式时,用JSON Assertion更方便判断. 1 在请求上右键添加json断言 2  编辑json Assertion 判断方式: 如果响应结果不是json格式的,fail ...

  5. BZOJ 2402 陶陶的难题II (树链剖分、线段树、凸包、分数规划)

    毒瘤,毒瘤,毒瘤-- \(30000\)这个数据范围,看上去就是要搞事的啊... 题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=2402 ...

  6. 2016 Multi-University Training Contest 2 部分题解

    1009,直接贪心,只要让后面的尽量小,第一位和第二位尽量大即可. 1011,直接统计奇数的字母的个数,然后用偶数的个数平均分配到它们上面即可.代码如下: #include <stdio.h&g ...

  7. ci框架总结（一）

    在进行数据库操作前一定要先初始化数据库类:$this->load->database(); 在model类中: class Myiapp_model extends CI_Model{ p ...

  8. Java 比较两个字符串的相似度算法（Levenshtein Distance）

    转载自: https://blog.csdn.net/JavaReact/article/details/82144732 算法简介: Levenshtein Distance,又称编辑距离,指的是两 ...

  9. dubbo备忘

    http://start.dubbo.io/ https://github.com/dubbo/dubbo-samples https://www.aliyun.com/product/edas ht ...

  10. nginx状态码

    200:服务器成功返回网页 403:服务器拒绝请求.404:请求的网页不存在 499:客户端主动断开了连接.500:服务器遇到错误,无法完成请求.502:服务器作为网关或代理,从上游服务器收到无效响应 ...