本文整理汇总了TypeScript中d3.time.scale方法的典型用法代码示例。如果您正苦于以下问题：TypeScript time.scale方法的具体用法？TypeScript time.scale怎么用？TypeScript time.scale使用的例子？那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类d3.time的用法示例。
在下文中一共展示了time.scale方法的7个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: getTimeScale
export function getTimeScale(items: ITacoTimePoint[], totalWidth: number, padding: number = 20) {
const firstTimePoint = moment(items[0].time).toDate();
const lastTimePoint = moment(items[items.length - 1].time).toDate();
return d3.time.scale()
.domain([firstTimePoint, lastTimePoint])
.range([padding, totalWidth - padding]);
}示例2: init
init() {
const {target, width, height, margin} = this;
// const {xTicks, yTicks, yRange} = this;
const {xTicks, yRange} = this;
const [w, h] = this.dimensions();
this.chart = d3.select(target)
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
this.x = d3.time.scale()
.range([0, w]);
this.y = d3.scale.linear()
.range(yRange);
this.xAxis = d3.svg.axis()
.orient('bottom')
.scale(this.x)
.ticks(xTicks)
.tickPadding(8)
.tickSize(-h);
this.chart.append('g')
.attr('class', 'x axis')
.attr('transform', `translate(0, ${h})`)
.call(this.xAxis);
his.details = this.chart.append('g')
.attr('class', 'details')
.style('display', 'none')
this.details.append('line')
.attr('class', 'x')
.attr('y1', 0)
.attr('y1', h)
this.details.append('text')
.attr('class', 'time')
this.details.append('g')
.attr('class', 'data')
this.overlay = this.chart.append('rect')
.attr('class', 'overlay')
.attr('width', w)
.attr('height', h)
.style('fill-opacity', 0)
.on('mousemove', _ => this.onMouseOver())
.on('mouseleave', _ => this.onMouseLeave());
this.xBisect = d3.bisector(d => d.time).left;
}示例3: Date
(start = Date.now() - 3600000, end = Date.now()) => {
const dates = d3.time
.scale()
.domain([new Date(start), new Date(end)])
.ticks();
return [
{
data: dates.map(x => ({
x: x.getTime(),
y: 1
}))
}
];
},示例4: getYScale
public getYScale(axis: Axis): any {
var min = this.series.min(name);
var start = this.canvas.plotArea.axisSize.top;
var end = this.canvas.plotArea.axisSize.top + this.canvas.plotArea.height;
if (this.categories.format === "%s") {
axis.setScaleType(ScaleType.Ordinal);
return d3.scale.ordinal()
.domain(this.categories.labels)
.rangeRoundBands([start, end], this.options.plotOptions.bands.innerPadding, this.options.plotOptions.bands.outerPadding);
}
else {
axis.setScaleType(ScaleType.Time);
return d3.time.scale()
.domain(d3.extent(this.categories.labels, (d: string): Date => {
return d3.time.format(this.categories.format).parse(d);
}).reverse())
.nice() // adds additional ticks to add some whitespace
.range([min, this.canvas.plotArea.height]);
}
}示例5: Date
{ owner: 4, color: 'green', start: new Date('1-15-2014'), end: new Date('1-15-2014 12:00') },
{ owner: 4, color: 'yellow', start: new Date('1-15-2014 12:00'), end: new Date('1-16-2014') },
{ owner: 5, color: 'orange', start: new Date('2-5-2014'), end: new Date('2-12-2014') }
];
var later_data = [
{ owner: 2, color: 'red', start: new Date('2-10-2014'), end: new Date('2-11-2014') },
{ owner: 3, color: 'yellow', start: new Date('2-10-2014'), end: new Date('2-13-2014') },
{ owner: 4, color: 'blue', start: new Date('2-11-2014'), end: new Date('2-15-2014') }
];
var width = 900,
height = 500,
panX = 0;
var xScale = d3.time.scale().domain([new Date('1-1-2014'), new Date('1-31-2014')]).range([0, width]),
yScale = d3.scale.ordinal().domain(team_member_ids).rangeRoundBands([0, height], 0, 0),
xAxis = d3.svg.axis().scale(xScale).tickSize(-480).orient('top');
var zoom = d3.behavior.zoom().scaleExtent([.025, 1]).x(xScale)
.on('zoom', function () {
render();
})
.on('zoomend', function () {
if (xScale.domain()[1] > d3.time.day.offset(d3.max(data.map(function (d) { return d.end; })), 4)) {
data = data.concat(later_data);
render();
}
});
var drag = d3.behavior.drag()示例6: ngOnInit
ngOnInit() {
const data = [
{key: "Group1" , value: 37, date: new Date(2012, 4, 23)},
{key: "Group2" , value: 12, date: new Date(2012, 4, 23)},
{key: "Group3" , value: 46, date: new Date(2012, 4, 23)},
{key: "Group1" , value: 32, date: new Date(2012, 4, 24)},
{key: "Group2" , value: 19, date: new Date(2012, 4, 24)},
{key: "Group3" , value: 42, date: new Date(2012, 4, 24)},
{key: "Group1" , value: 45, date: new Date(2012, 4, 25)},
{key: "Group2" , value: 16, date: new Date(2012, 4, 25)},
{key: "Group3" , value: 44, date: new Date(2012, 4, 25)},
{key: "Group1" , value: 24, date: new Date(2012, 4, 26)},
{key: "Group2" , value: 52, date: new Date(2012, 4, 26)},
{key: "Group3" , value: 64, date: new Date(2012, 4, 26)},
];
const svgElem = d3.select(".svg");
const margin = {top: 20, right: 30, bottom: 30, left: 40},
width = +svgElem.attr("width") - margin.left - margin.right,
height = +svgElem.attr("height") - margin.top - margin.bottom;
const x = d3.time.scale()
.range([0, width]);
const y = d3.scale.linear()
.range([height, 0]);
const z = d3.scale.category10();
const xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(d3.time.days);
const yAxis = d3.svg.axis()
.scale(y)
.orient("left");
const stack = d3.layout.stack<{key: string , value: number, date: Date, values: any}>()
.offset("zero")
.values(d => d.values as any)
.x(d => d.date as any)
.y(d => d.value as any);
const nest = d3.nest<{key: string , value: number, date: Date}>()
.key(d =>
d.key);
const area = d3.svg.area<{key: string , value: number, date: Date, y: number, y0: number}>()
.interpolate("cardinal")
.x(d => x(d.date))
.y0(d => y(d.y0))
.y1(d => y(d.y0 + d.y));
const svg = svgElem
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const layers = stack(nest.entries(data as any) as any);
x.domain(d3.extent(data, d => d.date as any));
y.domain([0, d3.max(data, d => (d as any).y0 + (d as any).y)]);
svg.selectAll(".layer")
.data(layers)
.enter().append("path")
.attr("class", "layer")
.attr("d", d => area(d.values as any))
.style("fill", (d, i) => z(i.toString()));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
}示例7: ngOnInit
ngOnInit() {
let data: Array<QpsChartData> = this.data;
let t = data[0].time.getTime();
let el:any = this.elementRef.nativeElement;
let parentWidth = el.parentElement.offsetWidth;
let parentHeight = 250;
let margin = { top: 20, right: 40, bottom: 20, left: 40 };
let width = parentWidth - margin.left - margin.right;
let height = parentHeight - margin.top - margin.bottom;
let x = d3.time.scale()
.domain([t, data[data.length-1].time.getTime()])
.range([0, width]);
let y = d3.scale.linear()
.domain([0, d3.max(data, d => d.value)])
.range([height, 0]);
let xAxis = d3.svg.axis()
.scale(x)
.ticks(5)
.tickFormat(d3.time.format('%H:%M'))
.orient("bottom");
let yAxis = d3.svg.axis()
.scale(y)
.ticks(4)
.orient("left");
let line = d3.svg.line<QpsChartData>()
.x((d: QpsChartData) => x(new Date(d.time.getTime())))
.y((d: QpsChartData) => y(d.value))
.interpolate("linear");
let svg = d3.select(el).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
svg.selectAll('.axis line, .axis path')
.style({'stroke': 'Black', 'fill': 'none', 'stroke-width': '2px'});
let path = svg.append("g")
.append("path")
.datum(data)
.attr("d", line)
.attr("stroke", "red")
.attr("stroke-width", 1)
.attr("fill", "none");
let avPath = svg.append("g")
.append("path")
.datum([data[0], data[data.length-1]])
.attr("d", line)
.attr("stroke", "#D8D2D2")
.attr("stroke-width", 1)
.attr("fill", "none");
}