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

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. 题解 [CF525D] Arthur and Walls

    题面 解析 首先考虑将一个\('*'\)变成\('.'\)后会形成什么, 显然至少是一个\(2\times 2\)的矩形. 因为\(1\times 1\)和\(1\times 2\)的改了没用啊, 而 ...

  2. 【Android-布局复用】 多个界面复用一个布局文件（一）

    1.layout_common.xml 复用的布局文件 <?xml version="1.0" encoding="utf-8"?> <!-- ...

  3. 1、创建MFC应用程序——单个文档

    文件——新建——项目——MFC应用程序 运行即可. [菜单栏单击事件] 视图——其他窗口——资源视图,双击Menu中的IDR_MAINFRAM,打开菜单栏.在主菜单栏输入“显示你好”. “显示你好”处 ...

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

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

  5. OpenSSL 通过OCSP手动验证证书

    翻译:https://raymii.org/s/articles/OpenSSL_Manually_Verify_a_certificate_against_an_OCSP.html?utm_sour ...

  6. Spring Boot系列目录

    1.spring mvc 接口动态注入 FactoryBean ImportBeanDefinitionRegistrar ClassPathScanningCandidateComponentPro ...

  7. 配置魔药(DP)

    配置魔药 [问题描述] 在<Harry Potter and the Chamber of Secrets>中,Ron的魔杖因为坐他老爸的Flying Car撞到了打人柳,不幸被打断了,从 ...

  8. 解决 go get golang.org/x/* 拉取失败问题

    go get -u -v golang.org/x/text 有时候会因为网络问题,导致失败. 在不用代理的情况下,可以使用以下方案. golang.org,他们在github上有一个镜像库 以 go ...

  9. [Shell] 分隔字符串为数组

    #!/bin/bash tmp="test,girl,boy,love" OLD_IFS="$IFS" IFS="," arr=($a) I ...

  10. HDU–5988-Coding Contest（最小费用最大流变形）

    Coding Contest Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...