本文整理匯總了TypeScript中d3.timeFormat函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript timeFormat函數的具體用法？TypeScript timeFormat怎麽用？TypeScript timeFormat使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了timeFormat函數的4個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: addXAxis
function addXAxis() {
scope.xScale = xScale = d3.scaleTime()
.domain([timeRange.from, timeRange.to])
.range([0, chartWidth]);
let ticks = chartWidth / DEFAULT_X_TICK_SIZE_PX;
let grafanaTimeFormatter = grafanaTimeFormat(ticks, timeRange.from, timeRange.to);
let timeFormat;
let dashboardTimeZone = ctrl.dashboard.getTimezone();
if (dashboardTimeZone === 'utc') {
timeFormat = d3.utcFormat(grafanaTimeFormatter);
} else {
timeFormat = d3.timeFormat(grafanaTimeFormatter);
}
let xAxis = d3.axisBottom(xScale)
.ticks(ticks)
.tickFormat(timeFormat)
.tickPadding(X_AXIS_TICK_PADDING)
.tickSize(chartHeight);
let posY = margin.top;
let posX = yAxisWidth;
heatmap.append("g")
.attr("class", "axis axis-x")
.attr("transform", "translate(" + posX + "," + posY + ")")
.call(xAxis);
// Remove horizontal line in the top of axis labels (called domain in d3)
heatmap.select(".axis-x").select(".domain").remove();
}示例2: constructor
constructor(rootElt: AnySvgSelection, bounds: ChartBounds) {
this.bounds = bounds;
this.xScale = d3.scaleTime().range(
[bounds.axisSize + bounds.margin,
bounds.width - bounds.margin]);
this.yScale = d3.scaleLinear().range(
[bounds.height - bounds.axisSize - bounds.margin,
bounds.margin]);
this.yAxis = d3.axisLeft<number>(this.yScale)
.ticks(3);
this.xAxis = d3.axisBottom<Date>(this.xScale)
.ticks(d3.timeDay.every(1))
.tickFormat(d3.timeFormat("%b %d"));
this.lineSpec = d3.line<DataPoint>()
.x((d: DataPoint) => this.xScale(new Date(d.unix_seconds * 1000)))
.y((d: DataPoint) => this.yScale(d.temperature));
this.rootElt = rootElt;
this.precipBar = new IntensityBand<DataPoint>(
(d: DataPoint) => d.precipitation_chance,
intensity.blue,
{
width: this.bounds.width - this.bounds.axisSize - 2 * this.bounds.margin,
height: 3,
xPos: this.bounds.axisSize + this.bounds.margin,
yPos: this.bounds.height - this.bounds.axisSize - this.bounds.margin,
},
this.rootElt,
"precipBar");
this.cloudsBar = new IntensityBand<DataPoint>(
(d: DataPoint) => d.clouds,
intensity.gray,
{
width: this.bounds.width - this.bounds.axisSize - 2 * this.bounds.margin,
height: 3,
xPos: this.bounds.axisSize + this.bounds.margin,
yPos: this.bounds.height - this.bounds.axisSize - this.bounds.margin + 3,
},
this.rootElt,
"cloudsBar");
}示例3: addXAxis
addXAxis() {
this.scope.xScale = this.xScale = d3
.scaleTime()
.domain([this.timeRange.from, this.timeRange.to])
.range([0, this.chartWidth]);
const ticks = this.chartWidth / DEFAULT_X_TICK_SIZE_PX;
const grafanaTimeFormatter = ticksUtils.grafanaTimeFormat(ticks, this.timeRange.from, this.timeRange.to);
let timeFormat;
const dashboardTimeZone = this.ctrl.dashboard.getTimezone();
if (dashboardTimeZone === 'utc') {
timeFormat = d3.utcFormat(grafanaTimeFormatter);
} else {
timeFormat = d3.timeFormat(grafanaTimeFormatter);
}
const xAxis = d3
.axisBottom(this.xScale)
.ticks(ticks)
.tickFormat(timeFormat)
.tickPadding(X_AXIS_TICK_PADDING)
.tickSize(this.chartHeight);
const posY = this.margin.top;
const posX = this.yAxisWidth;
this.heatmap
.append('g')
.attr('class', 'axis axis-x')
.attr('transform', 'translate(' + posX + ',' + posY + ')')
.call(xAxis);
// Remove horizontal line in the top of axis labels (called domain in d3)
this.heatmap
.select('.axis-x')
.select('.domain')
.remove();
}示例4:
.text(d => d3.timeFormat('%a %b %d')(d));