D3.js折线图,时间在两个轴上
d3.js line chart with time on both axis
我想画一个折线图,x轴是日期,y轴是时间,单位是分钟和秒。
轴都很好,但当我试图绘制线图时,它没有显示我预期的。
我最终得到了沿轴的线。
这是我的js代码
/**
* Function for sorting times
*/
function numOrdA(a, b){ return (a[1]-b[1]); }
/**
* Array of timestamps and times in seconds
*/
var data = [
[1395237411, 130],
[1395950916, 90],
[1397557328, 95],
[1398353666, 87]
];
/**
* Sort the data by the time in seconds
*/
data.sort(numOrdA);
var width = 700,
height = 400,
padding = 100;
/**
* Create an svg container
*/
var vis = d3.select("body").
append("svg:svg")
.attr("width", width)
.attr("height", height);
/**
* Create min and max dates for x axis
*/
var mindate = new Date,
maxdate = new Date;
mindate.setTime(data[0][0] * 1000);
maxdate.setTime(data[data.length - 1][0] * 1000);
/**
* Create min and max times for y axis
*/
var mintime = new Date,
maxtime = new Date;
mintime.setTime(data[0][1] * 1000);
maxtime.setTime(data[data.length - 1][1] * 1000);
/**
* Create y scale using min and max times
*/
var yScale = d3.time.scale()
.domain([mintime, maxtime])
.range([height - padding, padding]);
/**
* Create x scale with min and max dates
*/
var xScale = d3.time.scale()
.domain([mindate, maxdate])
.range([padding, width - padding * 2]);
/**
* Create the y axis with time in minutes and seconds
*/
var yAxis = d3.svg.axis()
.orient("left")
.scale(yScale)
.tickFormat(d3.time.format("%M:%S"));
/**
* Create the x axis with a date format
*/
var xAxis = d3.svg.axis()
.orient("bottom")
.scale(xScale)
.tickFormat(d3.time.format("%a %x"));
/**
* Append y axis
*/
vis.append("g")
.attr("transform", "translate("+padding+",0)")
.call(yAxis);
/**
* Append the x axis
*/
vis.append("g")
.attr("class", "xaxis")
.attr("transform", "translate(0," + (height - padding) + ")")
.call(xAxis);
/**
* Rotate the text on the x axis
*/
vis.selectAll(".xaxis text")
.attr("transform", function(d) {
return "translate(" + this.getBBox().height*-2 + "," + this.getBBox().height + ")rotate(-45)";
});
/**
* Line function to plot the times (y axis) against dates (x axis)
*/
var line = d3.svg.line()
.x(function(d) {
return xScale(d[1]);
})
.y(function(d) {
return yScale(d[0]);
});
/**
* Add the path to the svg
*/
vis.append("svg:path").attr("d", line(data));
下面是jsfiddle
上的当前代码感谢您的帮助
其中一个主要问题是没有在line函数中将数据绘制为时间对象。
我找到了这个教程http://www.sitepoint.com/creating-simple-line-bar-charts-using-d3-js/,我遵循绘制折线图。
然后我想出了如何把所有东西都转换成基于时间的
我已经在Codepen上发布了最终代码。
相关文章:
- 当我在同一页上有两个图D3.js时,宽度异常
- 将两个图形(饼图和条形图)并排对齐::d3-js
- D3在转换时退出多个系列折线图标签
- 两个amCharts图与iPad上的jQueryMobile框架不显示在同一页面上
- 两个折线图之间的 D3 区域
- 无法在 d3.js 中的同一页面上生成两个饼图
- dc.js - 基于单个 csv 文件中的单独类别的多个折线图
- 链接两个D3图
- 为什么我的d3折线图在x轴上只有两个刻度
- 我如何用谷歌图表API绘制两个材质图,而没有一个是空的
- 在一个图表中打印两个面积图,而不将它们堆叠在一起
- 两个jcanvas图层蒙版可以在同一个画布上存在吗?
- 鼠标悬停在多个折线图上,相同的x(时间)显示不同的y(价格)
- jqplot:如果我有两个饼图,我能使每个具有相同标签的楔形具有相同的颜色吗?
- 在morris.js折线图中绘制两个范围的y轴
- D3.js折线图,时间在两个轴上
- NVD3图表的交互式指南(折线图)在12列网格(引导)中被剪切时,我绘制了两个图表
- JavaScript 图表 - 带有两个 Y 轴的 NVD3 折线图
- 如何合并两个facebook图api数据结果(JSON)
- js在折线图上绘制两个json数据集