TypeScript d3.time类代码示例

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]);
}

    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;


    }

 public parseFormat(value: string): any {
     if (this.format === "%s") {
         return value;
     }
     else if (this.format === "%n") {
         return value;
     }
     else {
         return d3.time.format(this.format).parse(value);
     }
 }

  (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
        }))
      }
    ];
  },

    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]);
        }
    }

    { 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()

import * as d3 from 'd3';
import { Timezone, WallTime } from 'chronoshift';
import { TimeRange } from 'plywood';

const formatWithYear = d3.time.format('%b %-d, %Y');
const formatWithoutYear = d3.time.format('%b %-d');

const formatTimeOfDayWithoutMinutes = d3.time.format('%-I%p');
const formatTimeOfDayWithMinutes = d3.time.format('%-I:%M%p');

function formatTimeOfDay(d: Date): string {
  return d.getMinutes() ? formatTimeOfDayWithMinutes(d) : formatTimeOfDayWithoutMinutes(d);
}

function isCurrentYear(year: number, timezone: Timezone): boolean {
  var nowWallTime = WallTime.UTCToWallTime(new Date(), timezone.toString());
  return nowWallTime.getFullYear() === year;
}

export enum DisplayYear {
  ALWAYS, NEVER, IF_DIFF
}

export function formatTimeRange(timeRange: TimeRange, timezone: Timezone, displayYear: DisplayYear): string {
  var { start, end } = timeRange;
  var startWallTime = WallTime.UTCToWallTime(start, timezone.toString());
  var endWallTime = WallTime.UTCToWallTime(end, timezone.toString());
  var endShiftWallTime = WallTime.UTCToWallTime(new Date(end.valueOf() - 1), timezone.toString());

  var showingYear = true;
  var formatted: string;

'use strict';

import * as d3 from 'd3';
import { Timezone, WallTime } from 'chronoshift';

const JOIN = ' - ';

var formatWithYear = d3.time.format('%b %-d, %Y');
var formatWithoutYear = d3.time.format('%b %-d');
var formatTimeOfDay = d3.time.format('%-I%p');

export function formatStartEnd(start: Date, end: Date, timezone: Timezone): string {
  var startWallTime = WallTime.UTCToWallTime(start, timezone.toString());
  var endWallTime = WallTime.UTCToWallTime(end, timezone.toString());
  var endShiftWallTime = WallTime.UTCToWallTime(new Date(end.valueOf() - 1), timezone.toString());

  var formatted: string;
  if (startWallTime.getFullYear() !== endShiftWallTime.getFullYear()) {
    formatted = [formatWithYear(startWallTime), formatWithYear(endShiftWallTime)].join(JOIN);
  } else {
    if (startWallTime.getMonth() !== endShiftWallTime.getMonth() || startWallTime.getDate() !== endShiftWallTime.getDate()) {
      formatted = [formatWithoutYear(startWallTime), formatWithYear(endShiftWallTime)].join(JOIN);
    } else {
      formatted = formatWithYear(startWallTime);
    }
  }

  if (startWallTime.getHours() || endWallTime.getHours()) {
    var timeString: string;
    if (startWallTime.getHours() !== endShiftWallTime.getHours()) {
      timeString = [formatTimeOfDay(startWallTime), formatTimeOfDay(endShiftWallTime)].join(JOIN);

tickFormat: d => time.format('%X')(new Date(d)),

	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);
	}