在D3.js中设置x轴上的参考线
Setting up reference lines on the x axis in D3.js
我已经尝试了几天,但没有找到解决方案。我有一个时间序列数据,每5分钟一次,可以延长几天。我是D3和Java脚本的新手。我花了一些时间来构建它。以下是我一直在做的jsfiddle的链接:
https://jsfiddle.net/adityap16/d61gtadm/2/
代码:
var data = [
{"mytime": "2015-12-01T11:10:00.000Z", "value": 64},
{"mytime": "2015-12-01T11:15:00.000Z", "value": 67},
{"mytime": "2015-12-01T11:20:00.000Z", "value": 70},
{"mytime": "2015-12-01T11:25:00.000Z", "value": 64},
{"mytime": "2015-12-01T11:30:00.000Z", "value": 72},
{"mytime": "2015-12-01T11:35:00.000Z", "value": 75},
{"mytime": "2015-12-01T11:40:00.000Z", "value": 71},
{"mytime": "2015-12-01T11:45:00.000Z", "value": 80}
];
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse;
data.forEach(function(d) {
d.mytime = parseDate(d.mytime);
});
//var margin = { top: 30, right: 30, bottom: 40, left:50 },
var margin = { top: 30, right: 30, bottom: 40, left:50 },
height = 200,
width = 800;
var color = "green";
var xaxis_param = "mytime";
var yaxis_param = "value"
var params1 = {margin:margin,height:height,width:width, color: color, xaxis_param:xaxis_param, yaxis_param :yaxis_param};
draw_graph(data,params1);
function draw_graph(data,params){
//Get the margin
var xaxis_param = params.xaxis_param;
var yaxis_param = params.yaxis_param;
var color_code = params.color;
var margin = params.margin;
var height = params.height - margin.top - margin.bottom,
width = params.width - margin.left - margin.right;
console.log("1")
var x_extent = d3.extent(data, function(d){
return d[xaxis_param]});
console.log("2")
var y_extent = d3.extent(data, function(d){
return d[yaxis_param]});
var x_scale = d3.time.scale()
.domain(x_extent)
.range([0,width]);
console.log("3")
var y_scale = d3.scale.linear()
.domain([0,y_extent[1]])
.range([height,0]);
//Line
var lineGen = d3.svg.line()
.x(function (d) {
return x_scale(d[xaxis_param]);
})
.y(function (d) {
return y_scale(d[yaxis_param]);
});
var myChart = d3.select('body').append('svg')
.style('background', '#E7E0CB')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate('+ margin.left +', '+ margin.top +')');
myChart
.append('svg:path')
.datum(data)
.attr('class', 'line')
.attr("d",lineGen)
.attr('stroke', color_code)
.attr('stroke-width', 1)
.attr('fill', 'none');
var legend = myChart.append("g")
.attr("class", "legend")
.attr("transform", "translate(" + 5 + "," + (height - 25) + ")")
legend.append("rect")
.style("fill", color_code)
.attr("width", 20)
.attr("height", 20);
legend.append("text")
.text(yaxis_param)
.attr("x", 25)
.attr("y", 12);
var vGuideScale = d3.scale.linear()
.domain([0,y_extent[1]])
.range([height, 0])
var vAxis = d3.svg.axis()
.scale(vGuideScale)
.orient('left')
.ticks(5)
var hAxis = d3.svg.axis()
.scale(x_scale)
.orient('bottom')
.ticks(d3.time.minute, 5);
myChart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(hAxis);
myChart.append("g")
.attr("class", "y axis")
.call(vAxis)
}
我目前遇到两个问题。
a.)我必须为每天的结束放置垂直标记。如何放置竖线来显示这些从一天到另一天的转换(标记)(只需一条简单的黑色竖线即可)?
b.)我们能处理缺失的数据吗?假设我一天都没有得到数据,我能得到这段时间的空白,然后直接绘制第二天的数据吗。(这个没那么重要)?
这是一个正在工作的jsfiddle:https://jsfiddle.net/kmandov/d61gtadm/3/
这就是你如何实现想要的结果:
问题a.)每天的垂直刻度:
首先,创建一个新的主轴,并将tickSize
设置为-height
,这样蜱虫就会一直穿过你的图表:
var majorAxis = d3.svg.axis()
.scale(x_scale)
.orient('bottom')
.ticks(d3.time.day, 1)
.tickSize(-height);
然后创建相应的svg元素:
myChart.append("g")
.attr("class", "x axis major")
.attr("transform", "translate(0," + height + ")")
.call(majorAxis);
然后删除主要记号的标签(您不希望它们重叠):
.axis.major text {
display: none;
}
以下是M.Bostock自己的一个很好的例子:http://bl.ocks.org/mbostock/4349486
问题B.)缺少数据
在线上设置.defined():
var lineGen = d3.svg.line()
.defined(function(d) { return d[yaxis_param]; })
.x(function (d) {
return x_scale(d[xaxis_param]);
})
.y(function (d) {
return y_scale(d[yaxis_param]);
});
以下是一个关于如何处理数据缺口的示例:http://bl.ocks.org/mbostock/3035090
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 为什么在单独的函数中应用时转换会闪烁/断断续续(D3)
- 如何在d3.js中返回路径的y坐标
- d3基于用户选择动态更新节点
- 相位器状态未捕获参考错误
- 有条件更新d3.js力图中节点的最佳方法
- 为什么我的d3.jsselectAll+过滤器没有过滤
- 使用D3.js计算带有字母间距的文本长度
- d3中堆栈函数和嵌套函数之间的差异
- D3.js模式不适用于弧形或圆环图
- d3.js Chord图的动态工具提示
- 聚合物0.5.5:核心列表中的条件模板和/或模板动态参考
- Javascript袖珍参考,第121页:这是怎么回事;猴子补丁”;方法应该有效
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- D3嵌套组作为x轴
- d3.hexbin插件-动态定义颜色域以适应数据
- 在D3.js中设置x轴上的参考线
- 理解“this"参考D3.js
- 参考JS数组在D3堆叠条形图
- 参考错误-可以'找不到变量d3 -当我尝试使用javascript创建钢琴