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

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. JS数组的交集、并集、差集，数组去重，获取两个数组重复的元素，去除两个数组相同的元素

    let arr1=[1,2,3,4,5,6] let arr2=[4,5,6,7,8,9] // 并集 数组去重 let RemoveSame=[...new Set([...arr1,...arr2 ...

  2. java读取 xml文件

    java读取xml文件的四种方法  转自https://www.cnblogs.com/lingyao/p/5708929.html Xml代码 1 <?xml version="1. ...

  3. PHP大文件分片上传

    前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...

  4. Zw函数与Nt函数的分别与联系

    Ring3中的NATIVE API,和Ring0的系统调用,都有同名的Zw和Nt系列函数,一度让初学者感到迷糊.N久前的我,也是相当的迷糊.现在就以ZwOpenProcess和NtOpenProces ...

  5. Jury Compromise

    K - Jury Compromise 参考:ACM POJ 1015 Jury Compromise(陪审团的人选,动态规划题,难) 说实话真有点难想,用一个DP[i][j]来表示在选取i个人,辩控 ...

  6. Ubuntu 16.04 一键安装P4开发环境记录

    写在最前 P4开发环境安装可采用陈翔同学的一键安装脚本:p4Installer p4c-bm是P4-14的编译器,p4c是现在主流P4-16的编译器,bmv2是支持P4运行的软件交换机 系统环境 在安 ...

  7. java.util.Date和java.sql.Date的区别和相互转化 （转）

    java.util.Date和java.sql.Date的区别及应用   java.util.Date 就是在除了SQL语句的情况下面使用 java.sql.Date 是针对SQL语句使用的,它只包含 ...

  8. python之ActionChains方法列表

    使用方法: 方法列表: click(on_element=None) ——单击鼠标左键 click_and_hold(on_element=None) ——点击鼠标左键,不松开 context_cli ...

  9. Android跨进程通信AIDL服务

    服务(Service)是android系统中非常重要的组件.Service可以脱离应用程序运行.也就是说,应用程序只起到一个启动Service的作用.一但Service被启动,就算应用程序关闭,Ser ...

  10. 浅谈WebView在新窗口浏览网页(setSupportMultipleWindows()与onCreateWindow()关系)

    一,写在前面 我们平常使用电脑浏览器浏览网页可能会有三种方式: 1.新窗口 2.当前窗口种的新选项卡 3.当前选项卡或者窗口 我们知道在电脑系统中同一时间可以开启多个相同的进程,就像你可以同时登陆2个 ...