创建具有不规则刻度的轴

我试图创建一个包含星期编号的轴。然而，由于轴遵循一个特殊的规则，我不能用正常的时间尺度：在一周的第一天1点开始创建具有不规则刻度的轴

每一年，周

这意味着，在结束每年，有可能会形成一个完整的星期天，在新的一年后开始再次第1周：

可以这样使用D3时间轴上进行，从而受益于所有善良的善良？

2016-01-06 Robert Grant

您可以使用tickFormat函数执行此操作。下面是比较默认与去年格式的周格式化的例子：

<!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>

Output：

你可以阅读更多关于d3.timehere，并.tickFormathere

来源

2016-01-06 16:18:58 adilapapaya

@adilapapaya嗨 - 感谢为了这。但是你的1-tick是在1月3日以下;应该是1月1日。这不是关于如何格式化刻度标签的问题。 –

@RobertGrant您可以将任何函数传递给'.tickFormat' ...只需用您自己的自定义版本替换上面的'd3.time.weekOfYear'，该版本接受'Date'对象并将标签输出到您的规范。我想你可以通过结合指定'.tickValues'来完成你想要的工作（所以你的滴答去1月1日，2008年1月，...） – adilapapaya

嗯，我明白你的意思。对于之前的信息抱歉 - 你可能是对的。我会试一试！ –

创建具有不规则刻度的轴

回答

相关问题