d3.js:从时间刻度中获取刻度格式
d3.js: get tick format from time scale
我正在用d3构建一个时间线可视化,其中域可以在几天到几十年内变化。我使用的是d3时间刻度和轴,如下所示:
var timeScale = d3.time.scale()
.domain([firstEvent, lastEvent])
.range([leftPadding, w - rightPadding]);
var timeAxis = d3.svg.axis()
.scale(timeScale)
.orient("bottom");
timeAxis.ticks(5);
由于域是可变的,所以使用ticks(x)
很方便,它会自动选择刻度格式。我的问题是,在某些情况下,年份没有显示,这是至关重要的。我的想法是在创建轴后检查刻度格式,如果它不包含年份,请在轴旁边手动显示。然而,我还没能得到刻度的刻度格式;使用CCD_ 2只是返回一个函数。我该如何解决这个问题?
一个简单的正则表达式测试怎么样?
var hasYear = false;
var re = /^'d{4}$/;
// get the ticks text
d3.selectAll('.x>.tick>text').each(function(d){
// does the text look like a year?
var txt = this.textContent;
if (re.test(txt)){
hasYear = true;
}
});
console.log(hasYear);
使用了这个示例代码,并在各种范围内播放:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis text {
font: 10px sans-serif;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 250, right: 40, bottom: 250, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.time.scale()
.domain([new Date(2013, 12, 2), new Date(2013, 12, 6)])
.range([0, width]);
var xAxis = d3.svg.axis()
.scale(x)
.ticks(5);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
xAxis.ticks().some(function(d){
return /^'d{4}$/.exec("3434")
})
var hasYear = false;
var re = /^'d{4}$/;
d3.selectAll('.x>.tick>text').each(function(d){
var txt = this.textContent;
if (re.test(txt)){
hasYear = true;
}
});
console.log(hasYear);
</script>
D3的时间轴格式检查刻度上显示的任何日期是否在1月1日午夜,以仅显示年份。您可以通过获取勾号然后检查此条件来检查是否会显示全年:
function isYear(t) {
return +t == +(new Date(t.getFullYear(), 0, 1, 0, 0, 0, 0));
}
var ticks = timeScale.ticks();
var willDisplayYear = ticks.some(isYear);
在这里完成两种情况的演示。
相关文章:
- 如何从Angularjs中的新日期获取日期格式
- 获取javascript中的公钥格式
- 获取日期和货币格式
- 如何从区域设置获取日期格式
- 如何使用 javascript 获取 UTC 格式的日期,而不考虑当前系统日期
- 获取表格格式的 Javascript 输出
- 需要减少用于获取日期格式的javascript方法代码
- 如何使用javascript以操纵的UTC格式获取当前日期
- 从服务器获取并传递给浏览器以在 Javascript 中格式化的日期时间格式
- 从日期选择器中获取默认格式的日期,并在jquery UI中转换为其他格式
- 在没有jsonp的情况下从另一个域获取数据(json格式)
- 使用JSONPjquery获取HTML格式的XML数据
- Amchart 和 Ajax 获取格式不正确的数据
- 获取格式正确的 html 源代码
- 如何在 Javascript 中获取格式良好的 DOM 文档 XML
- 选择2:获取格式选择以具有特定的上下文
- 如何使用javascript date.js库获取d / m / y格式的日期
- 获取格式整齐的地址:Latlng ->地址谷歌地图
- 如何从JSON中的字符串获取格式
- 如何从 Date() 和 ISOString 获取格式为“2016-07-06T10:57Z”的字符串日期