TypeScript d3.scaleTime函數代碼示例

本文整理匯總了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();
  }

開發者ID:postsql，項目名稱:grafana，代碼行數:31，代碼來源:rendering.ts

示例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");

}

開發者ID:mrjones，項目名稱:weather-graphs，代碼行數:47，代碼來源:charting.ts

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

開發者ID:MehdyKarimpour，項目名稱:extensions，代碼行數:40，代碼來源:ChartUtils.ts

示例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();
  }

開發者ID:gzq0616，項目名稱:grafana，代碼行數:37，代碼來源:rendering.ts

示例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) {
//.........這裏部分代碼省略.........

開發者ID:rajarshiwd，項目名稱:d3，代碼行數:101，代碼來源:final.component.ts

注：本文中的d3.scaleTime函數示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台，相關代碼片段篩選自各路編程大神貢獻的開源項目，源碼版權歸原作者所有，傳播和使用請參考對應項目的License；未經允許，請勿轉載。