D3.js 使用不规则记号创建轴
我正在尝试创建一个轴来保存周数。但是,我不能使用正常的时间刻度,因为轴遵循一条特殊规则: 每年,第1周从一周的第一天开始 这意味着在每年年底,可能会有几天形成一个不完整的一周,之后新的一年将从第1周开始: 是否可以使用d3时间轴进行此操作,从而受益于所有轴的优点?您可以使用tickFormat函数进行此操作。下面是一个将默认格式与一年中的一周格式进行比较的示例:D3.js 使用不规则记号创建轴,d3.js,D3.js,我正在尝试创建一个轴来保存周数。但是,我不能使用正常的时间刻度,因为轴遵循一条特殊规则: 每年,第1周从一周的第一天开始 这意味着在每年年底,可能会有几天形成一个不完整的一周,之后新的一年将从第1周开始: 是否可以使用d3时间轴进行此操作,从而受益于所有轴的优点?您可以使用tickFormat函数进行此操作。下面是一个将默认格式与一年中的一周格式进行比较的示例: <!DOCTYPE html> <meta charset="utf-8"> <style> b
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: sans-serif;
color: #444;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
font-size: 10px;
}
</style>
<body>
<h4>Week of Year Example</h4>
<div id="svg"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var hEach = 40; // height for each axis
var width = 960,
height = 2*hEach;
var x = d3.time.scale()
// month starts from 0!
.domain([new Date(2015, 11, 1), new Date(2016, 0, 30)])
.range([0, width]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
// Week of year
var xAxis_woy = d3.svg.axis()
.scale(x)
.tickFormat(d3.time.weekOfYear)
.orient("bottom");
var svg = d3.select("#svg").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
var gx = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (.5*hEach) + ")")
.call(xAxis);
var gx_woy = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (1.5*hEach) + ")")
.call(xAxis_woy);
</script>
:
您可以阅读更多关于d3.time和.tickFormat的信息Hi@adilapapaya-谢谢。但是你的1分在1月3日以下;应该是一月一号。这不是关于如何设置记号标签格式的问题。@RobertGrant您可以将任何函数传递给.tickFormat…只需将上面的d3.time.weekOfYear替换为您自己的自定义版本,该版本接收日期对象并将标签输出到您的规范。我认为你可以通过指定.tick值来实现你想要的,所以你的滴答声会持续到1月1日,1月8日,…嗯,我明白你的意思了。很抱歉之前的消息-你可能是对的。我要试试看!