本文整理汇总了TypeScript中d3.scaleTime函数的典型用法代码示例。如果您正苦于以下问题：TypeScript scaleTime函数的具体用法？TypeScript scaleTime怎么用？TypeScript scaleTime使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了scaleTime函数的5个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的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: scaleFor
export function scaleFor(column: ChartColumn<any>, values: number[], minRange: number, maxRange: number, scaleName: string | null | undefined): d3.ScaleContinuousNumeric<number, number> {
if (scaleName == "ZeroMax")
return d3.scaleLinear()
.domain([0, d3.max(values)!])
.range([minRange, maxRange])
.nice();
if (scaleName == "MinMax") {
if (column.type == "Date" || column.type == "DateTime") {
const scale = d3.scaleTime()
.domain(values)
.range([minRange, maxRange]);
const f = function (d: string) { return scale(new Date(d)); } as any as d3.ScaleContinuousNumeric<number, number>;
f.ticks = scale.ticks as any;
f.tickFormat = scale.tickFormat as any;
return f;
}
else {
return d3.scaleLinear()
.domain([d3.min(values)!, d3.max(values)!])
.range([minRange, maxRange])
.nice();
}
}
if (scaleName == "Log")
return d3.scaleLog()
.domain([d3.min(values)!, d3.max(values)!])
.range([minRange, maxRange])
.nice();
if (scaleName == "Sqrt")
return d3.scalePow().exponent(.5)
.domain([d3.min(values)!, d3.max(values)!])
.range([minRange, maxRange]);
throw Error("Unexpected scale: " + scaleName);
}示例4: 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();
}示例5: plot
plot() {
var data: Array<ExpectedData> = [
{ key: 39, value: 60, date: "2014/01/01" },
{ key: 40, value: 58, date: "2014/01/02" },
{ key: 38, value: 59, date: "2014/01/03" },
{ key: 41, value: 56, date: "2014/01/04" },
{ key: 43, value: 57, date: "2014/01/05" },
{ key: 40, value: 55, date: "2014/01/06" },
{ key: 42, value: 56, date: "2014/01/07" },
{ key: 41, value: 52, date: "2014/01/08" },
{ key: 39, value: 54, date: "2014/01/09" },
{ key: 36, value: 57, date: "2014/01/10" },
{ key: 37, value: 56, date: "2014/01/11" },
{ key: 41, value: 59, date: "2014/01/12" },
{ key: 43, value: 56, date: "2014/01/13" },
{ key: 42, value: 52, date: "2014/01/14" },
{ key: 43, value: 48, date: "2014/01/15" },
{ key: 40, value: 47, date: "2014/01/16" },
{ key: 42, value: 48, date: "2014/01/17" },
{ key: 44, value: 45, date: "2014/01/18" },
{ key: 46, value: 43, date: "2014/01/19" },
{ key: 48, value: 41, date: "2014/01/20" },
{ key: 53, value: 36, date: "2014/01/21" },
{ key: 52, value: 34, date: "2014/01/22" },
{ key: 53, value: 32, date: "2014/01/23" },
{ key: 55, value: 34, date: "2014/01/24" },
{ key: 56, value: 32, date: "2014/01/25" },
{ key: 55, value: 30, date: "2014/01/26" },
{ key: 57, value: 28, date: "2014/01/27" },
{ key: 56, value: 26, date: "2014/01/28" },
{ key: 59, value: 24, date: "2014/01/29" },
{ key: 58, value: 22, date: "2014/01/30" },
{ key: 60, value: 20, date: "2014/01/31" }
];
var w = window.screen.width;
var h = 450;
var margin = {
top: 10,
bottom: 100,
left: 50,
right: 50
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
this.svg = d3.select(".container-fluid").append("svg")
.attr("id", "chart")
.attr("width", w)
.attr("height", h)
.style("background", "#F5F5DC")
.style('text-align', "center");
this.chart = this.svg.append("g")
.classed("display", true)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.style("background", "green");
var dateParser = d3.timeParse("%Y/%m/%d");
// Define the div for the tooltip
var div = d3.select("body").append("div")
.attr("class", "tooltip").style("margin","0px").style("padding","2px")
.style("position","absolute").style("height","30px").style("border-radius","8px")
.style("background", "lightsteelblue").style("font","12px sans-serif").style("width","60px")
.style("opacity", 0);
var x = d3.scaleTime()
.domain(d3.extent(data, function (d) {
var date = dateParser(d.date);
return date;
}))
.range([0, width]);
var y = d3.scaleLinear()
.domain([0, d3.max(data, function (d) {
return d.value;
})])
.range([height, 0]);
var y1 = d3.scaleLinear()
.domain([0, d3.max(data, function (d) {
return d.key;
})])
.range([height, 0]);
var area = d3.area<ExpectedData>()
.x(function (d) {
return x(dateParser(d.date));
})
.y0(height)
.y1(function (d) {
return y(d['value']);
});
//line1 for value in data
var line = d3.line<ExpectedData>()
.x(function (d) {
//.........这里部分代码省略.........