如何用D3绘制各种样式的x坐标轴

gggggggbong 发布于2019-08-20 19:01 / 1364人阅读

摘要：折线图，散点图经常采用这种样式的坐标轴。轴使用和来控制刻度显示在坐标轴的上方或者下方。北京上海广州深圳轴表现形式基本上，柱状图都会采用这种坐标轴。而绘制折线图，散点图等等又需要采用这种表现形式，所以这种方法是比较常用的。

该文只使用d3.jsV4版本进行绘制，不关注V3版本，我们要与时俱进。

在绘制图表的过程中，直坐标系是绕不开的一个问题，直方图，折线图，散点图等等都需要使用到直坐标系。而其中最关键的是x轴的绘制，因为y轴基本上都是数值显示。如何用代码实现，x轴的表现形式是什么，这是本文主要讨论的问题。

1 连续性x坐标轴 1.1 从零开始的连续性x坐标轴

什么是从零开始，就是从绘制的坐标轴的最左端开始显示第一个刻度。折线图，散点图经常采用这种样式的x坐标轴。

let height = 400
let width = 600
let x = d3.scaleLinear().range([0, width])
let xScale = x.domain([0, 10])

// x轴
let xAxis = svg.append("g")
               .attr("class", "xAxis")
               .attr("transform", `translate(0, ${height})`)
               .call(d3.axisBottom(xScale))

使用d3.axisTop和d3.axisBottom()来控制刻度显示在坐标轴的上方或者下方。

表现形式：

1.2 不从零开始的连续性x坐标轴

情况比较少，基本不用，所以不作阐述。

1.3 时间型x坐标轴

时间轴也是线性的，所以将它归为此类。

let height = 400
let width = 600
let x = d3.scaleTime().range([0, width])
let xScale = x.domain([new Date(2017, 1), new Date(2017, 6)])

// x轴
let xAxis = svg.append("g")
               .attr("class", "xAxis")
               .attr("transform", `translate(0, ${height})`)
               .call(d3.axisBottom(xScale))

表现形式：

2 非连续性x坐标轴 2.1 不从零开始的非连续性x坐标轴

先从不从零开始说起，因为这个用法比较正常。关键是使用d3.scaleBand()。

let height = 400
let width = 600
let x = d3.scaleBand().range([0, width])
let xScale = x.domain(["北京", "上海", "广州", "深圳"])

// x轴
let xAxis = svg.append("g")
               .attr("class", "xAxis")
               .attr("transform", `translate(0, ${height})`)
               .call(d3.axisBottom(xScale))

表现形式：

基本上，柱状图都会采用这种x坐标轴。

2.2 从零开始的非连续性x坐标轴

使用d3.scaleOrdinal()

let height = 400
let width = 600
let x = d3.scaleOrdinal().range([150, 300, 450, 600])
let xScale = x.domain(["北京", "上海", "广州", "深圳"])

// x轴
let xAxis = svg.append("g")
               .attr("class", "xAxisis")
               .attr("transform", `translate(0, ${height})`)
               .call(d3.axisBottom(xScale))

表现形式：

在正常情况中，x轴的数据经常是非线性的。而绘制折线图，散点图等等又需要采用这种表现形式，所以这种方法是比较常用的。

GPU服务器云服务器如何用c语言绘制椭圆如何用国外的服务器呢 java绘制坐标如何用微博推广自己的网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85026.html

d3入门篇（四）：绘制完整柱状图添加过渡效果

摘要：这篇学习笔记是入门篇的最后一部分，将前几篇的内容整合到一起，绘制带过渡效果的柱状图，这次先给大家看一下结果图。这篇学习笔记是入门篇的最后一部分，将前几篇的内容整合到一起，绘制带过渡效果的柱状图，这次先给大家看一下结果图。结果 showImg(https://segmentfault.com/img/bVblfGG?w=1230&h=1210); 前言先放结果图是想反馈一下在整合基...

Jason 2019-08-23 14:08 评论0 收藏0
交互式数据可视化－D3.js（一）

摘要：如其中，和表示绘制区域的宽高，表示版本号。下面分别是绘制一个多边形和折线路径标签功能最丰富，以上图形都可以使用路径制作出来，用法与折线类似给出一个坐标点在坐标前添加一个英文字母，表示如何运动到此坐标点点。英文字符按照功能分为五类。在D3中会穿插SVG 方便大家对D3对使用 SVG简介可缩放矢量图(scalabel vector graphics)，是用于描述二维矢量图形的一种图形格...

MASAILA 2019-08-20 10:39 评论0 收藏0
d3入门篇（三）：比例尺坐标轴

摘要：为了根据显示刻度灵活变化宽高，而不是定死，特别是数据差异性很大的时候，我们希望图表显示范围都在画布里面，这时就会引入比例尺的概念来进行缩放。根据这些规则，会为我们返回一个比例尺函数。这篇文章继续介绍d3的基础知识比例尺在绘制柱状图时，我们往往会定义很大的画布，然而我们要可视化的数据确很小，这时会出现很多留白的情况。为了根据显示刻度灵活变化宽高，而不是定死，特别是数据差异性很大的...

tomato 2019-08-23 14:03 评论0 收藏0
前端每日实战：109# 视频演示如何用 CSS 和 D3 创作一个用文字组成的心形图案

摘要：引入库声明一个数组，包含若干单词用创建元素用为变量赋值删除文件中相关的元素和文件中相关的变量。把数组元素改为爱在各种语言的单词愛最后，为第个单词设置特殊的文字样式大功告成 showImg(https://segmentfault.com/img/bVbfwGW?w=400&h=303); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://cod...

EdwardUp 2019-08-29 16:25 评论0 收藏0