D3.js 时间刻度刻度线 - 仅限年份和月份 - 自定义时间格式
D3.js time scale tick marks - Years and months only - Custom time format
我正在尝试制作一个 可缩放 图表,在 x 轴上带有时间刻度。
默认行为
使用像这样的 xScale:
var x = d3.time.scale()
.domain([getDate(minDate), getDate(maxDate)])
.range([0, width]);
和像这样的 xAxis:
var xAxis = d3.svg.axis()
.scale(x);
几乎就是我所追求的。
但我想要一个显示年份的自定义时间格式,而不是显示月份的名称,只显示一条刻度线,没有文本(并且可能添加 class这些刻度),同时仍保留缩放轴的默认行为。
如有任何帮助,我们将不胜感激。
编辑:我想 Lars' answer here 会是一个很好的方法,只要它可以应用于可缩放的图表。有什么新想法吗?
这可能有效。要显示年份,而不是显示月份的名称,只显示一条刻度线,不显示文本:
var timeAxis = d3.svg.axis()
.scale(timeScale)
.orient('bottom')
.ticks(d3.time.years, 1)//should display 1 year intervals
.tickFormat(d3.time.format('%Y'))//%Y-for year boundaries, such as 2011
.tickSubdivide(12);//subdivide 12 months in a year
资源:
- d3.js 主要次要刻度样式 (http://bl.ocks.org/vjpgo/4689130)
- scale.ticks 和 scale.tickFormat()
(https://github.com/mbostock/d3/wiki/Time-Intervals#year)
每两小时显示一个刻度的示例代码,并将其格式化为仅显示小时和 AM/PM:
var timeAxis = d3.svg.axis()
.scale(timeScale)
.orient('bottom')
.ticks(d3.time.hours, 2)
.tickFormat(d3.time.format('%I%p'));
我最后写了一个小函数来检查缩放级别并相应地设置轴的刻度数。
function calcTickAmount() {
if (d3.event.scale > 15) {
return 3
} else {
return 10;
}
}
然后这个函数会在更新函数中被调用
function draw() {
xAxis.ticks(calcTickAmount());
axes.call(xAxis);
}
// Config SVG
var width = 500,
height = 300,
minDate = '1860',
maxDate = '1958';
// Draw SVG element
var svgSelect = d3.select('div.tl').append('svg');
// Translate SVG G to accomodate margin
var translateGroupSelect = svgSelect
.attr('width', width)
.attr('height', height)
.append('g');
// Define d3 xScale
var x = d3.time.scale()
.domain([new Date(minDate), new Date(maxDate)])
.range([0, width]);
// Define main d3 xAxis
var xAxis = d3.svg.axis()
.scale(x)
.ticks(10);
// Draw axes
var axes = translateGroupSelect.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + 0 + ")")
.call(xAxis);
// Define zoom
var zoom = d3.behavior.zoom()
.x(x)
.scaleExtent([1, 32])
.center([width / 2, height / 2])
.size([width, height])
.on("zoom", draw);
// Apply zoom behavior to SVG element
svgSelect.call(zoom);
// Repetitive drawing stuff on every zoom event
function draw() {
xAxis.ticks(calcTickAmount());
axes.call(xAxis);
}
function calcTickAmount() {
if (d3.event.scale > 15) {
return 3
} else {
return 10;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div class="tl">
</div>
我正在尝试制作一个 可缩放 图表,在 x 轴上带有时间刻度。
默认行为 使用像这样的 xScale:
var x = d3.time.scale()
.domain([getDate(minDate), getDate(maxDate)])
.range([0, width]);
和像这样的 xAxis:
var xAxis = d3.svg.axis()
.scale(x);
几乎就是我所追求的。
但我想要一个显示年份的自定义时间格式,而不是显示月份的名称,只显示一条刻度线,没有文本(并且可能添加 class这些刻度),同时仍保留缩放轴的默认行为。
如有任何帮助,我们将不胜感激。
编辑:我想 Lars' answer here 会是一个很好的方法,只要它可以应用于可缩放的图表。有什么新想法吗?
这可能有效。要显示年份,而不是显示月份的名称,只显示一条刻度线,不显示文本:
var timeAxis = d3.svg.axis()
.scale(timeScale)
.orient('bottom')
.ticks(d3.time.years, 1)//should display 1 year intervals
.tickFormat(d3.time.format('%Y'))//%Y-for year boundaries, such as 2011
.tickSubdivide(12);//subdivide 12 months in a year
资源:
- d3.js 主要次要刻度样式 (http://bl.ocks.org/vjpgo/4689130)
- scale.ticks 和 scale.tickFormat() (https://github.com/mbostock/d3/wiki/Time-Intervals#year)
每两小时显示一个刻度的示例代码,并将其格式化为仅显示小时和 AM/PM:
var timeAxis = d3.svg.axis()
.scale(timeScale)
.orient('bottom')
.ticks(d3.time.hours, 2)
.tickFormat(d3.time.format('%I%p'));
我最后写了一个小函数来检查缩放级别并相应地设置轴的刻度数。
function calcTickAmount() {
if (d3.event.scale > 15) {
return 3
} else {
return 10;
}
}
然后这个函数会在更新函数中被调用
function draw() {
xAxis.ticks(calcTickAmount());
axes.call(xAxis);
}
// Config SVG
var width = 500,
height = 300,
minDate = '1860',
maxDate = '1958';
// Draw SVG element
var svgSelect = d3.select('div.tl').append('svg');
// Translate SVG G to accomodate margin
var translateGroupSelect = svgSelect
.attr('width', width)
.attr('height', height)
.append('g');
// Define d3 xScale
var x = d3.time.scale()
.domain([new Date(minDate), new Date(maxDate)])
.range([0, width]);
// Define main d3 xAxis
var xAxis = d3.svg.axis()
.scale(x)
.ticks(10);
// Draw axes
var axes = translateGroupSelect.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + 0 + ")")
.call(xAxis);
// Define zoom
var zoom = d3.behavior.zoom()
.x(x)
.scaleExtent([1, 32])
.center([width / 2, height / 2])
.size([width, height])
.on("zoom", draw);
// Apply zoom behavior to SVG element
svgSelect.call(zoom);
// Repetitive drawing stuff on every zoom event
function draw() {
xAxis.ticks(calcTickAmount());
axes.call(xAxis);
}
function calcTickAmount() {
if (d3.event.scale > 15) {
return 3
} else {
return 10;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div class="tl">
</div>