d3.js实现自定义多y轴折线图的示例代码

前言

需求是实现一个生命体征的体温单，x轴是时间线，y轴有多个体征项。效果不是特别复杂，但是行业特殊性，所以也没有现成可用的，所以用 d3.js 实现了一个多y轴的折线图。

基础

这张图只用了d3.js的一些最基本用法，数据量也比较小，所以也用不到多么牛逼的用法，只涉及到了比例尺 scale ，轴 axis ，画线和点，最后我添加了一个缩放效果。

效果

在线预览

具体实现

1.初始化一个svg作为容器，之后所有的点线面都是在这个容器里边画了

svg.select('#id')
  .append('svg')
  .attr('width', width)
  .attr('height', height)

2.定义比例尺 scale ，定义域 domain 显示的刻度范围,值域 range 实际数据刻度

// x轴以时间为刻度
this.x = d3
 .scaleTime()
 .domain([this.beginTime, this.endTime])
 .range([0, this.width]);

// y轴按照像素值为刻度，所有数据需按照比例转换计算
this.y = d3
 .scaleLinear()
 .domain([0, this.height])
 .range([this.height, 0]);

3.定义轴 axis , axis 需要和 scale 结合使用，作为参数传入 axis(scale) 。

其中， ticks 表示刻度数量，传入数值即可，注意一点， ticks 默认会取 2,5,10 这三个数中的一个，如果你传入一个其他的数，它会根据实际尺寸找一个接近的值（这里还涉及到倍数情况下，详细了解可查阅官方api）；

如果刻度想要自定义需要利用 tickValues([NO1,NO2,NO3...]) 实现； tickSize 表示刻度尺寸，设置为容器svg的宽高即实现了全图标尺效果。

this.xAxis = d3
 .axisTop(this.x)
 // .ticks(d3.timeHour.every(4))
 .tickValues(d3.timeHour.range(this.beginTime, this.endTime, 4))
 .tickSize(this.height)
 .tickFormat(function (d, i) {
  // return d.getHours();
  return;
 });

this.yAxis = d3
 .axisLeft()
 .scale(this.y)
 .tickValues(d3.range(0, this.height, this.height / 40))
 .tickSize(-this.width)
 .tickFormat(function (d, i) {
  return;
 });

4.定义折线模板

// 折线模板
this.line = d3
 .line()
 .x(function (d) {
  return that.x(d.datetime);
 })
 .y(function (d) {
  return that.y(d.svgValue);
 });

5.以上就完成了画布的基本框架，剩下的事情就是数据渲染。

该表中，顶部的时间轴和左侧y轴是自定义加上的，首先在容器中分配出来两块区域用来画轴；再根据容器的宽高按比例具体实现。

源代码地址：https://github.com/zhangxiongcn/multiple-Y-axis-line-chart

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • D3.js实现折线图的方法详解

    D3.js实现折线图的方法详解

    前言 D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在<D3.js实现柱状图的方法详解>中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧. 折线图由坐标轴.线条和点组成.和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js): <!DOCTYPE html> <html lang="en"> <head>

  • 基于d3.js实现实时刷新的折线图

    基于d3.js实现实时刷新的折线图

    先来看看效果图 下面直接上源代码,html文件 <html> <head> <meta charset="utf-8"> <title>实时刷新折线图</title> <style> .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-seri

  • d3.js实现自定义多y轴折线图的示例代码

    d3.js实现自定义多y轴折线图的示例代码

    前言 需求是实现一个生命体征的体温单,x轴是时间线,y轴有多个体征项.效果不是特别复杂,但是行业特殊性,所以也没有现成可用的,所以用 d3.js 实现了一个多y轴的折线图. 基础 这张图只用了d3.js的一些最基本用法,数据量也比较小,所以也用不到多么牛逼的用法,只涉及到了比例尺 scale ,轴 axis ,画线和点,最后我添加了一个缩放效果. 效果 在线预览 具体实现 1.初始化一个svg作为容器,之后所有的点线面都是在这个容器里边画了 svg.select('#id') .append('

  • python绘制双Y轴折线图以及单Y轴双变量柱状图的实例

    近来实验室的师姐要发论文,由于论文交稿时间临近,有一些杂活儿需要处理,作为实验室资历最浅的一批,我这个实习生也就责无旁贷地帮忙当个下手.今天师姐派了一个小活,具体要求是: 给一些训练模型的迭代次数,训练精度的数据,让我做成图表形式展示出来,一方面帮助检查模型训练时的不足,另一方面来看样本数目和预测精度之间的联系,数据具体格式如下: Iteration 1500 label train test right acc 12 143 24 24 1.0 160 92 16 15 0.9375 100

  • python学习之使用Matplotlib画实时的动态折线图的示例代码

    python学习之使用Matplotlib画实时的动态折线图的示例代码

    有时,为了方便看数据的变化情况,需要画一个动态图来看整体的变化情况.主要就是用Matplotlib库. 首先,说明plot函数的说明. plt.plot(x,y,format_string,**kwargs) x是x轴数据,y是y轴数据.x与y维度一定要对应. format_string控制曲线的格式字串 下面详细说明: color(c):线条颜色 linestyle(ls):线条样式 linewidth(lw):线的粗细 关于标记的一些参数: marker:标记样式 markeredgecol

  • python使用matplotlib绘制折线图的示例代码

    示例代码如下: #!/usr/bin/python #-*- coding: utf-8 -*- import matplotlib.pyplot as plt # figsize - 图像尺寸(figsize=(10,10)) # facecolor - 背景色(facecolor="blue") # dpi - 分辨率(dpi=72) fig = plt.figure(figsize=(10,10),facecolor="blue") #figsize默认为4,

  • 微信小程序实现折线图的示例代码

    插件地址:https://github.com/xiaolin3303/wx-charts/blob/master/dist/wxcharts.js 微信小程序折线图效果: 首先需要引入一个折线图的插件: XXX.xml 的代码: <canvas style="width: 400px; height: 500px;" canvas-id="yueEle" binderror="canvasIdErrorCallback" ><

  • Android自定义View实现天气预报折线图

    Android自定义View实现天气预报折线图

    本文实例为大家分享了Android自定义View画天气预报折线图的具体代码,供大家参考,具体内容如下 效果图如下: 刚开始尝试用第三方画曲线的框架来画效果图,后来发现曲线间的阴影当有负数的度数的时候画不出来,而且不需要点击放大.点点可点的效果,用框架显得很臃肿,所以最后用自定义View来画的折线图.自定义画折线图的大致思路:这个图是有多个四边形组成的(4个点连接起来就是一个四边形),两边延伸:添加四个多余的点,将左右的边距设置成负数即可. 代码如下: public class WeatherCh

  • python绘制分布折线图的示例

    python绘制分布折线图的示例

    用Python 绘制分布(折线)图,使用的是 plot()函数. 一个简单的例子: # encoding=utf-8 import matplotlib.pyplot as plt from pylab import * # 支持中文 mpl.rcParams['font.sans-serif'] = ['SimHei'] # 'mentioned0cluster', names = ['mentioned1cluster','mentioned2cluster', 'mentioned3clu

  • Android自定义View之渐变色折线图的实现

    Android自定义View之渐变色折线图的实现

    目录 前言 如何实现 总结 前言 在之前的项目中,有做过一个需求,需要实现一个颜色渐变的折线图.当时项目中使用的图表库是MPAndroidChart,但是该库没有提供合适的方法来实现想要的效果,因此只能通过自定义view来实现. 通过这篇文章记录一下,便于之后需要实现类似的效果时查找使用. 如何实现 通过创建LinearGradient来实现颜色渐变,并将之设置到画笔Paint的着色器Shader,绘制想要的路径即可实现该效果. 实现代码如下: class GradientLineChart :

  • Highcharts 多个Y轴动态刷新数据的实现代码

    Highcharts 多个Y轴动态刷新数据的实现代码

    效果图: js代码: $(function() { $(document).ready(function() { Highcharts.setOptions({ global: { useUTC: false } }); var chart; chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'spline', animation: Highcharts.svg, // don't animate in ol

  • Android HelloChart开源库图表之折线图的实例代码

    Android HelloChart开源库图表之折线图的实例代码

    前面我们介绍了开源图表库MPAndroidChart,请参考: Android MPAndroidChart开源库图表之折线图的实例代码 我们今天介绍的将是一个更为优秀的图表库,比MPAndroidChart性能更好,功能更完善,UI风格更美观,坐标轴更精细. 支持缩放.滑动以及平移.Zoom(pinch to zoom, double tap zoom), scroll and fling 支持自定义坐标轴(比如坐标轴位置:上下左右内部),支持自动生成坐标轴.Custom and auto-g

随机推荐