画坐标轴

//使用d3的svg的axis()方法生成坐标轴
var x_axis = d3.svg.axis().scale(scale_x),
y_axis = d3.svg.axis().scale(scale_y) g.append("g")
.call(x_axis)

页面效果如下:这个时候x轴在页面的上方,不在我们想要的位置,可以通过设置transform属性将坐标轴移到自己想要的位置

画y轴
g.append("g")
.call(y_axis)

效果如下,这个时候x轴在页面的上方,不在我们想要的位置,所以要让y轴旋转

y轴旋转代码:加上 orient()

y_axis = d3.svg.axis().scale(scale_y).orient("left")

旋转后的效果图如下:会发现y轴的数值是由大变小而不是由小变大,这是因为在计算机页面中的时候和几何数学中的坐标轴哦的方向是不一样的

普通数学坐标系:

计算机屏幕坐标系

所以旋转后的y轴坐标系的值是由大变小而不是由小变大

所以我们可以改变y轴的值的范围来改变页面的显示效果

var scale_y = d3.scale.linear()
.domain([0, d3.max(data)]) //domain定义输入范围
//将 .range([0, g_height])修改为:
.range([g_height, 0]) //range()定义输出范围

发现这两个类控制着坐标轴样式,通过设置css样式给坐标轴加上刻度

.domain,
.tick line {
stroke: gray;
stroke-width: 1;
}

到这儿,坐标系就画完了,~

d3.js ---画坐标轴的更多相关文章

  1. 用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

    前言 本文灵感来源于Mike Bostock 的一个 demo 页面 原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: gi ...

  2. D3.js:坐标轴

    坐标轴: 是可视化图表中经常出现的一种图形,由一些列线段和刻度组成.坐标轴在 SVG 中是没有现成的图形元素的,需要用其他的元素组合构成.D3 提供了坐标轴的组件,如此在 SVG 画布中绘制坐标轴变得 ...

  3. D3.js画思维导图(转)

    思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layou ...

  4. 用D3.js画树状图

    做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...

  5. d3.js画折线图

    下载d3.zip,并解压到网页文件所在的文件夹 windows下,在命令行进入网页文件夹,输入 python -m http.server 在浏览器中输入127.0.0.1:8000/xxx.html ...

  6. 用D3.js画的人物关系demo

    代码下载地址:https://github.com/zhangzn3/group-explorer ### Demo1功能 *** * 支持节点拖拽 * 支持节点拖拽并固定位置 * 支持鼠标浮到节点显 ...

  7. SVG基础图形和D3.js

    使用D3.js画一个SVG 的 圆 circle 可以使用如下代码创建: <svg width="50" height="50"> <circ ...

  8. D3.js学习笔记(六)——SVG基础图形和D3.js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

  9. 【 D3.js 入门系列 --- 5 】 如何添加坐标轴

    第3节中做了一个图标,但没有为它添加一个相应的坐标轴,这样不知道每一个柱形到底有多长.这一节做一个坐标轴. D3中的坐标轴都是以 svg 图的形式出现的,这也是为什么在第3节中要使用 svg 的方法做 ...

随机推荐

  1. jquery时间控件

    jQuery 时间控件推荐 博客分类: jQuery 时间控件   My97DatePicker  My97DatePicker是一个更全面,更人性化,并且速度一流的日期选择控件.具有强大的日期范围限 ...

  2. StartDT_AI_Lab | 开启“数据+算法”定义的新世界

    继「数据中台技术汇」栏目推出以来,获得了不少技术极客的喜爱.作为AI驱动的数据中台创导者,深度关注核心算法技术的自研创新.融合探索,故推出全新AI算法栏目「StartDT_AI_Lab」,主要介绍算法 ...

  3. [LC] 198. House Robber

    You are a professional robber planning to rob houses along a street. Each house has a certain amount ...

  4. [LC] 224. Basic Calculator

    Implement a basic calculator to evaluate a simple expression string. The expression string may conta ...

  5. LeetCode Day 11

    LeetCode0021 将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1->2->4, 1->3->4 输出:1 ...

  6. redis保存dataset

    公司统一走redis缓存,也将之前的memcache迁移到redis碰到问题是redis的dataset缓存. memcache底层封装了dataset的序列化. 而redis引的DLL包,未支持.所 ...

  7. 吴裕雄--天生自然 R语言开发学习:中级绘图(续二)

    #------------------------------------------------------------------------------------# # R in Action ...

  8. js事件节流

    背景:在监听浏览器滚动条的scroll事件时该事件会触发很多次,这样当快速滚动时会有很差的性能,所以要限制事件触发的频率,可以防抖和节流,这里我记录简单的节流方法 <!DOCTYPE html& ...

  9. 阿里巴巴-德鲁伊druid连接池配置

    阿里巴巴推出的国产数据库连接池,据网上测试对比,比目前的DBCP或C3P0数据库连接池性能更好,Druid与其他数据库连接池使用方法基本一样(与DBCP非常相似),将数据库的连接信息全部配置给Data ...

  10. Python爬虫实战之爬取百度贴吧帖子

    大家好,上次我们实验了爬取了糗事百科的段子,那么这次我们来尝试一下爬取百度贴吧的帖子.与上一篇不同的是,这次我们需要用到文件的相关操作. 本篇目标 对百度贴吧的任意帖子进行抓取 指定是否只抓取楼主发帖 ...