TypeScript d3.axisBottom函數代碼示例

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

function drawLegendValues(elem, colorScale, rangeFrom, rangeTo, maxValue, minValue, legendWidth) {
  const legendElem = $(elem).find('svg');
  const legend = d3.select(legendElem.get(0));

  if (legendWidth <= 0 || legendElem.get(0).childNodes.length === 0) {
    return;
  }

  const legendValueScale = d3
    .scaleLinear()
    .domain([0, rangeTo])
    .range([0, legendWidth]);

  const ticks = buildLegendTicks(0, rangeTo, maxValue, minValue);
  const xAxis = d3
    .axisBottom(legendValueScale)
    .tickValues(ticks)
    .tickSize(LEGEND_TICK_SIZE);

  const colorRect = legendElem.find(':first-child');
  const posY = getSvgElemHeight(legendElem) + LEGEND_VALUE_MARGIN;
  const posX = getSvgElemX(colorRect);

  d3
    .select(legendElem.get(0))
    .append('g')
    .attr('class', 'axis')
    .attr('transform', 'translate(' + posX + ',' + posY + ')')
    .call(xAxis);

  legend
    .select('.axis')
    .select('.domain')
    .remove();
}

function drawLegendValues(elem, colorScale, rangeFrom, rangeTo, maxValue, minValue, legendWidth) {
  let legendElem = $(elem).find('svg');
  let legend = d3.select(legendElem.get(0));

  if (legendWidth <= 0 || legendElem.get(0).childNodes.length === 0) {
    return;
  }

  let legendValueScale = d3.scaleLinear()
    .domain([0, rangeTo])
    .range([0, legendWidth]);

  let ticks = buildLegendTicks(0, rangeTo, maxValue, minValue);
  let xAxis = d3.axisBottom(legendValueScale)
    .tickValues(ticks)
    .tickSize(2);

  let colorRect = legendElem.find(":first-child");
  let posY = getSvgElemHeight(legendElem) + 2;
  let posX = getSvgElemX(colorRect);

  d3.select(legendElem.get(0)).append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + posX + "," + posY + ")")
    .call(xAxis);

  legend.select(".axis").select(".domain").remove();
}

function makeAxis(svg, margin, xScale, yScale, width, height) {
  const axisBottom = d3.axisBottom(xScale);
  axisBottom.tickSizeOuter(0);
  svg.append("g")
    .attr("transform", `translate(${margin.left},${height + margin.top})`)
    .call(axisBottom);

  const axisLeft = d3.axisLeft(yScale);
  axisLeft.tickSizeOuter(0);
  svg.append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`)
    .call(axisLeft);

  const axisRight = d3.axisRight(yScale);
  axisRight.ticks(0);
  axisRight.tickSizeOuter(0);
  svg.append("g")
    .attr("transform", `translate(${width + margin.left},${margin.top})`)
    .call(axisRight);

  const axisTop = d3.axisTop(xScale);
  axisTop.ticks(0);
  axisTop.tickSizeOuter(0);
  svg.append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`)
    .call(axisTop);
}

    }, function(error, data: [{ letter: string, frequency: number}]) {
      if (error) {
        throw error;
      }

      x.domain(data.map((d) => d.letter));
      y.domain(d3.extent(data, (d) => d.frequency));

      g.append('g')
        .attr('class', 'axis axis--x')
        .attr('transform', `translate(0, ${height})`)
        .call(d3.axisBottom(x));

      g.append('g')
        .attr('class', 'axis axis--y')
        .call(d3.axisLeft(y).ticks(10, '%').tickPadding(23))
        .append('text')
          .attr('transform', 'rotate(-90)')
          .attr('y', 6)
          .attr('dy', '0.71em')
          .attr('text-anchor', 'end')
          .text('Frequency');

      g.selectAll('.bar')
        .data(data)
        .enter().append('rect')
          .attr('class', 'bar')
          .attr('x', (d) => x(d.letter))
          .attr('y', (d) => y(d.frequency))
          .attr('width', x.bandwidth())
          .attr('height', (d) => height - y(d.frequency));
    });

export function* axes(xtitle, ytitle, changeLimits) {

  let margin = { top: 20, right: 25, bottom: 30, left: 50 },
    width = 480 - margin.left - margin.right,
    height = 180 - margin.top - margin.bottom;

  let svg = d3.select("body").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 + ")");
  
  let colors = d3.scaleOrdinal(d3.schemeCategory10);
  let x = d3.scaleLinear().range([0, width]);
  let y = d3.scaleLinear().range([height, 0]);
  let x_axis = d3.axisBottom(x);
  let y_axis = d3.axisLeft(y);
  let x_node = svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")");
  let y_node = svg.append("g")
    .attr("class", "y axis");

  x_node.append("text")
    .attr("transform", "translate(" + width + ", 0)")
    .text(xtitle);
  y_node.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text(ytitle);

  let l = d3.line()
    .x(function (d, n) { return x(n) })
    .y(function (d) { return y(d) });
  let p = svg.append("path")
    .attr("class", "line")
    .attr("stroke", colors("1"));

  let first = true;
  while (true) {
    let data = yield svg;
    let ymin = Math.min(...data);
    let ymax = Math.max(...data);
    if (changeLimits || first) {
      first = false;
      x.domain([0, data.length]);
      y.domain([ymin, ymax]);
    }
    // update axes
    x_node.call(x_axis);
    y_node.call(y_axis);

    p.datum(data)
      .attr("d", l);
  }
}

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

}

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

//.........這裏部分代碼省略.........

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

        return x(dateParser(d.date));
      })
      .y(function (d) {
        return y(d['value']);
      });


    //line2 for key in data
    var line2 = d3.line<ExpectedData>()
      .x(function (d, i) {

        return x(dateParser(d.date));
      })
      .y(function (d) {
        return y1(d.key);
      });

// X-Axis 
    this.chart.append("g")
      .classed("x axis", true)
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x).ticks(5));

//labeling the x-axis
    this.chart.append("text")
      .attr("x", 325)
      .attr("y", 330)
      .style("text-anchor", "middle")
      .text("Date");

//Y0-axis 
    this.chart.append("g")
      .classed("y0 axis", true)
      .attr("transform", "translate(" + width + ",0)")
      .style("stroke", "red")
      .call(d3.axisRight(y).ticks(5));

//labeling the y0-axis
    this.chart.append("text")
    .attr("transform", "rotate(-90)")
    .attr("x", -150)
    .attr("y", -25)
    .style("text-anchor", "middle")
    .text("Y0 -Axis");

// y1-Axis 
    this.chart.append("g")
      .classed("y1 axis", true)
      .style("stroke", "blue")
      .attr("transform", "translate(0,0)")
      .call(d3.axisLeft(y1).ticks(6));

//labeling the y1-axis
    this.chart.append("text")

  private generateBarChart(data: any) {

    let that = this;
    let margin = {top: 20, right: 40, bottom: 60, left: 80};


    let viewerWidth = $(this.vizCanvas.nativeElement).width() - margin.left - margin.right;
    let viewerHeight = $(this.vizCanvas.nativeElement).height() - margin.top - margin.bottom;
    let formatNumber = d3.format('.2n'),
      formatBillion = function (x) {
        return formatNumber(x / 1e9) + 'B';
      },
      formatMillion = function (x) {
        return formatNumber(x / 1e6) + 'M';
      },
      formatThousand = function (x) {
        return formatNumber(x / 1e3) + 'k';
      },
      formatAsIs = function (x) {
        return x;
      };

    function formatAbbreviation(x) {
      let v = Math.abs(x);
      return (v >= .9995e9 ? formatBillion
        : v >= .9995e6 ? formatMillion
          : v >= .9995e3 ? formatThousand
            : formatAsIs)(x);
    }


    let x = d3.scaleLinear().range([0, viewerWidth]);
    let y = d3.scaleLinear().range([viewerHeight, 0]);


// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
    let svg = d3.select(this.vizCanvas.nativeElement).append('svg')
      .attr('width', viewerWidth + margin.left + margin.right)
      .attr('height', viewerHeight + margin.top + margin.bottom)
      .append('g')
      .attr('transform',
        'translate(' + margin.left + ',' + margin.top + ')');


    let xis: number[] = data.map(function (d: any) {
      return Number(d[that._x_accessor]);
    });


    let yis: number[] = data.map(function (d: any) {
      return Number(d[that._y_accessor]);
    });


    // Scale the range of the data
    x.domain(d3.extent(xis));
    y.domain(d3.extent(yis));


    // Add the scatterplot
    svg.selectAll('dot')
      .data(data)
      .enter().append('circle')
      .attr('r', 3)
      .attr('cx', function (d) {
        return x(d[that._x_accessor]);
      })
      .attr('cy', function (d) {
        return y(
          d[that._y_accessor]);

      });

    // Add the X Axis
    svg.append('g')
      .attr('transform', 'translate(0,' + viewerHeight + ')')
      .call(d3.axisBottom(x).tickFormat(formatAbbreviation))
      .selectAll('text')
      .attr('y', 0)
      .attr('x', 9)
      .attr('dy', '.35em')
      .attr('transform', 'rotate(45)')
      .style('text-anchor', 'start');

    // Add the Y Axis
    svg.append('g')
      .call(d3.axisLeft(y).tickFormat(formatAbbreviation));


    svg.append('rect')
      .attr('x', 0)
      .attr('y', 0)
      .attr('height', viewerHeight)
      .attr('width', viewerWidth)
      .style('stroke', 'black')
      .style('fill', 'none')
      .style('stroke-width', '1');

//.........這裏部分代碼省略.........