d3.js 画日期格式的坐标轴

D3.js坐标轴的绘制方法、添加坐标轴的刻度和各比例尺的坐标轴(V3版本)

坐标轴(Axis) 坐标轴(Axis)在很多图表中都可见到,例如柱形图.折线图.散点图等.坐标轴由一组线段和文字组成,坐标轴上的点由一个坐标值确定.但是,如果使用SVG的直线和文字一笔一画的绘制坐标轴,工作量将会极其的大.D3提供了坐标轴的制作方法,需要之前所给大家讲的比例尺一起使用.开发者仅仅需要几行代码,就能够生成各式各样的坐标轴. 与坐标轴相关的方法有: d3.svg.axis() : 创建一个默认的新坐标轴. axis(selection) : 将此坐标轴应用到指定的选择

js常规日期格式处理、月历渲染、倒计时函数

日期格式处理在前端的日常任务中非常常见,但是为此引入monent.js这样的类库又会显得有点臃肿,毕竟我们一个特定的项目中,并不需要monent.js那么全的涵盖范围.另外,如果现在公司让你自己手写一个日历组件(月历.周历),日历组件中需要耦合我们的其他业务需求,如果有一个任务列表,当11月22号的待进行任务,我需要在日历上有一个绿色圆点,表示当天有待办事项.下面介绍一些常规的函数,希望对大家有用. 月历效果图月历.png 函数目录 getFormatDateStr 获得指定日期格式的字符串:

字符串转换成js的日期格式

js字符串转日期格式 ,JavaScript字符串转日期格式大家都知道JS是根据结果来确定数据类型的. 当然我们也是可以转化的,下面我就介绍两种关于JS字符串类型转换成日期类型的方法, 我个人比较喜欢的是第一种方法. 大家有什么别的好方法也可以分享一下. 1.eval方法转换方法,---推荐使用这种方法我写成了一个方法大家要吧直接调用 ? <script type="text/javascript"> //字符串转日期格式,strDate要转为日期格式的

JS关于日期格式转换的问题

写Js时,有个地方用到日期,要求是yyyy--MM--dd的格式,于是想到了format函数,下面介绍了时间函数的定义,和调用前引入函数和如何格式化自己想要的日期格式. //当前时间 var Time = new Date().format("yyyy-MM-dd"); //但是当时format是报红的,后来才知道, //需要在页面加载js时调用一下时间函数,代码如下: $(function () { datatime(); }); //时间函数 function datatime()

用D3.js画树状图

做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同网上有很多这种数据可视化展示的js控件,我这里选择了D3.js. 首先在html页面需要包含D3的js文件,其次我们需要将数据构造成json格式,然后存入到一个d3.json文件 { "name":"如何学习D3", "children": [ { "name":"预备

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

前言本文灵感来源于Mike Bostock 的一个 demo 页面原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: github 在线演示 : demo 效果可以看到, 上图左上角为图例, 中间为各个手机公司之间的专利关系图. 图例中有三种线段: 红色实线: 正在进行专利诉讼 (箭头指向方为被诉讼方) 蓝色虚线: 诉讼已经结束绿色实线: 专利已经授权实现下面让我们看看如何一步步实现上图的效果. 分析数据 [

js中日期格式与时间戳格式互换

2014-04-23 18:55:49:123 日期格式 1398250549123 时间戳格式前台显示日期格式,则 function tsToTime(ts) { var date = new Date(ts * 1000);//时间戳为10位需*1000,时间戳为13位的话不需乘1000 var Y = date.getFullYear() + '-'; var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1)

js json日期格式转换日期方法

接收json数据,日期格式为:"\/Date(1414078309687)\/" var value = "/Date(1414078309687)/"; var da = eval('new ' + value.replace('/', '', 'g')); da.toLocaleDateString() //2014/10/23 da.toLocaleTimeString() //下午11:31:49 //通过正则拿到里面数字. value.replace(

D3.js画思维导图（转）

思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layout)布局制作出来的图具有“树形”.因此,可以凭借这两种布局来制作思维导图. 1. 构造思路树状图布局,将一个具有层级关系的对象root转换成节点数组nodes时,情况如下.有一个root对象: { name: "node1", children: [ { name: "node

d3.js ---画坐标轴

画坐标轴 //使用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) 效果如

d3.js画折线图

下载d3.zip,并解压到网页文件所在的文件夹 windows下,在命令行进入网页文件夹,输入 python -m http.server 在浏览器中输入127.0.0.1:8000/xxx.html 示例如下,html文件和data存在同一个目录下 https://bl.ocks.org/mbostock/3884955 <!DOCTYPE html> <meta charset="utf-8"> <style> path { stroke-wid

js设置日期格式

取数据时后台返回的日期数据是一串数字,前台显示时需要将时间格式化,通过以下代码转换. var format = function(time, format){ var t = new Date(time); var tf = function(i){return (i < 10 ? '0' : '') + i}; return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){ switch(a){ cas

js将日期格式转换为YYYY-MM-DD HH:MM:SS

使用日期插件用js处理日期格式

function compareDate(checkStartDate, checkEndDate) { var arys1= new Array(); var arys2= new Array(); var arys3= new Array(); var d = new Date(); var str = d.getFullYear()+"-"+((d.getMonth()+1)>=10?+(d.getMonth()+1):"0"

JS转换日期格式

// 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) // 例子: // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 // (new Date()).Format("

js判断日期格式（YYYYMM）

function datepanduan(obj){ var date = document.getElementById(obj.id).value; var reg = /^\b[1-3]\d{3}(0[1-9]|1[0-2])$/; var flg = date.match(reg); if( date != null && date != ''){ if( flg == null ){ alert('输入错误,请输入“YYYYMM”六位数字格式\n' ); obj.focus();

js将日期格式的时候转换成时间搓

自己写的一个方法 function split_time(time){//将当前时间转换成时间搓例如2013-09-11 12:12:12 var arr=time.split(" "); var day=arr[0].split("-"); var hour=arr[1].split(":"); return Date.UTC(day[0],(day[1]-1),day[2],hour[0],hour[1],hour[2])

JS时间日期格式转换

第一种: function ConvertJSONDate(jsondate) { if (jsondate != "" && jsondate != null) { var date = new Date(parseInt(jsondate.replace("/Date(", "").replace(")/", ""), 10));

js 时间日期格式转换

Date.prototype.Format = function(formatStr) { var str = formatStr; var Week = ['日', '一', '二', '三', '四', '五', '六']; str = str.replace(/yyyy|YYYY/, this.getFullYear()); str = str.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toSt

用D3.js画的人物关系demo

代码下载地址:https://github.com/zhangzn3/group-explorer ### Demo1功能 *** * 支持节点拖拽 * 支持节点拖拽并固定位置 * 支持鼠标浮到节点显示节点信息 * 支持鼠标浮到节点隐藏不相关的节点及线 * 支持画布整体缩放移动 ### Demo2功能 *** * 支持节点拖拽 * 支持节点拖拽并固定位置 * 支持鼠标浮到节点显示节点信息 * 支持双击节点隐藏不相关的节点及线可以累加双击的节点 * 支持双击画布空白处还原显示所有节点信息 * 支

js 过滤日期格式

Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds()

d3.js 画日期格式的坐标轴

热门专题