How to use d3-axis - 10 common examples

const yScale = scaleLinear().range([innerHeight, 0]);

    // filter out infinite values
    const filteredData = data.filter(d => d < Infinity && d > -Infinity);

    const xExtent = extent(filteredData);
    xScale.domain(xExtent);
    this.xAxis.call(axisBottom(xScale).ticks(7));

    const bins = histogram()
      .domain(xScale.domain())
      .thresholds(xScale.ticks(20))(filteredData);

    yScale.domain([0, max(bins, d => d.length)]);
    this.yAxis.call(axisLeft(yScale).ticks(4));

    let bars = this.countRects.selectAll('.bar').data(bins);
    bars.exit().remove();
    const barsEnter = bars.enter().append('g').attr('class', 'bar');

    const sampleBin = bins[1] || bins[0]; // first one can be smaller so use second if available
    const barWidth = Math.max(1, xScale(sampleBin.x1) - xScale(sampleBin.x0) - 1);
    barsEnter
      .append('rect')
      .attr('x', 1)
      .attr('width', barWidth)
      .style('fill', '#0bb');

    bars = bars.merge(barsEnter)
      .attr('transform', d => `translate(${xScale(d.x0)}, ${yScale(d.length)})`)
      .each(function eachBar(d) {

_renderHistogramAxis() {
        const histogramXAxisScale = scaleTime()
            .domain([
                this.histogramChartXScale.invert(0),
                this.histogramChartXScale.invert(this.state.histogramChartDimensions.width)
            ])
            .range([0, this.state.histogramChartDimensions.width]);

        // Setting the x-axis histogram representation.
        const histogramXAxis = d3AxisBottom(histogramXAxisScale)
            .tickValues(this.histogramChartXScale.ticks(this.props.defaultBarCount / BARS_TICK_RATIO))
            .tickFormat(this.props.xAxisFormatter);

        d3Select(this.histogramXAxisRef.current)
            .call(histogramXAxis);

        const histogramYAxis = d3AxisLeft(this.histogramChartYScale)
            .ticks(this.props.yAxisTicks)
            .tickSize(0)
            .tickFormat(this.props.yAxisFormatter);

        d3Select(this.histogramYAxisRef.current)
            .call(histogramYAxis);
    }

constructor(selector, options) {
    super(selector, options);

    // create 

});
  }

  var eventTypes = ['render', 'resize', 'highlight', 'mark', 'brush', 'brushend', 'brushstart', 'axesreorder'].concat(keys(config));

  var events = dispatch.apply(_this$4, eventTypes),
      flags = {
    brushable: false,
    reorderable: false,
    axes: false,
    interactive: false,
    debug: false
  },
      xscale = scalePoint(),
      dragging = {},
      axis = axisLeft().ticks(5),
      ctx = {},
      canvas = {};

  var brush = {
    modes: {
      None: {
        install: function install(pc) {}, // Nothing to be done.
        uninstall: function uninstall(pc) {}, // Nothing to be done.
        selected: function selected() {
          return [];
        }, // Nothing to return
        brushState: function brushState() {
          return {};
        }
      }
    },

mounted() {
        let axisHolder = this.$refs.axisHolder;
        let height = axisHolder.offsetHeight;
        let vis = d3Selection.select(axisHolder)
            .append("svg:svg")
            .attr("width", "100%")
            .attr("height", height);

        this.width = this.$refs.axisHolder.clientWidth;
        this.xAxis = d3Axis.axisTop();
        this.dragging = false;

        // draw x axis with labels. CSS is used to position them.
        this.axisElement = vis.append("g");

        this.setViewFromTimeSystem(this.openmct.time.timeSystem());
        this.setScale();

        //Respond to changes in conductor
        this.openmct.time.on("timeSystem", this.setViewFromTimeSystem);
        setInterval(this.resize, RESIZE_POLL_INTERVAL);
    },
    destroyed() {

.text(title);

        selection.append('span')
            .attr('class', 'value');

        var context = canvas.node().getContext('2d');
        //context.imageSmoothingEnabled = false;
        //context.translate(margin.left, margin.top);

        // update the y scale, based on the data extents
        var _extent = extent || d3_extent(data);

        var max = Math.max(-_extent[0], _extent[1]);
        y.domain([0, max]);
        //x = d3.scaleTime().domain[];
        axis = axisTop(x).ticks(5);

        // Draw ----------------------------------------------------------------------------

        context.clearRect(0, 0, width, height);
        //context.translate(0.5, 0.5);

        // the data frame currently being shown:
        var increment = step + spacing,
            startIndex = ~~Math.max(0, -(offsetX / increment)),
            endIndex = ~~Math.min(data.length, startIndex + width / increment);

        // skip drawing if there's no data to be drawn
        if (startIndex > data.length) return;


        // we are drawing positive & negative bands separately to avoid mutating canvas state

this.volumeScale.domain([0,d3Array.max(this.kData,d=>d.volume)])

		const priceAxis=this.g.select('.price-axis')
					.call(d3Axis[this.wideScreen ? 'axisLeft' : 'axisRight'](this.priceScale).tickValues(priceRange))
					.call(this.alignPriceLabel)
		const timeMod = 8
		const timeValues = timeRange.filter((x,i)=> i % timeMod === 0)
		this.g.select('.time-axis')
					.call(d3Axis.axisBottom(this.timeScale)
											.tickValues(timeValues)
											.tickFormat(d3TimeFomat.timeFormat("%y%m%d")))
		this.g.select('.volume-time-axis')
					.call(d3Axis.axisBottom(this.timeScale).tickValues([]))

		const volumeAxis=this.g.select('.volume-axis')
													.call(d3Axis.axisRight(this.volumeScale).ticks(2))

		const candleLines=this.g.selectAll('.candle-line')
														.data(this.kData)
		candleLines.enter()
							.append('line')
							.attr('class','candle-line')
							.merge(candleLines)
							.attr('x1',d=>this.timeScale(d.date)+this.timeScale.bandwidth()/2)
							.attr('y1',d=>this.priceScale(d.high))
							.attr('x2',d=>this.timeScale(d.date)+this.timeScale.bandwidth()/2)
							.attr('y2',d=>this.priceScale(d.low))
							.attr('stroke',d=>this.stockColor(d.open,d.close))
		candleLines.exit().remove()

		const candleBars=this.g.selectAll('.candle-bar')
													.data(this.kData)

export const drawAxis = (svg: SVGElement, scale: Scale, options: DrawAxisOptions) => {
  let axis: Axis;
  switch (options.orient) {
    case 'top':
      axis = axisTop(scale);
      break;
    case 'bottom':
      axis = axisBottom(scale);
      break;
    case 'left':
      axis = axisLeft(scale);
      break;
    case 'right':
      axis = axisRight(scale);
      break;
    default:
      console.error(`invalid axis orient ${options.orient}`);
      return;
  }
  axis.ticks(options.ticks || DEFAULT_AXIS_TICKS);
  if (options.ticks === 0) {
    axis.tickValues([]);
  }
  let svgAxes: Selection = select(svg).select('g');
  if (svgAxes.empty()) {
    svgAxes = (select(svg).append('g') as Selection)
      .classed(options.classes || '', true);
  } else {
    svgAxes.selectAll('*').remove();
  }

_getXAxis(scale: Object) {
    const { xScaleType } = this.props;
    const axis = axisBottom().scale(scale);
    switch (xScaleType) {
      case XScaleType.TIME:
        axis.tickFormat(formatTime);
        break;

      default:
        axis.tickFormat(d => d && formatSha(d));
        break;
    }
    return axis;
  }

drawAxis(): void {
    if (this.graphDataMerged.lineChart.axis.x.visible) {
      this.root
        .append('g')
        .attr('class', 'x axis')
        .attr('transform', `translate(0, ${this.height})`)
        .call(
          axisBottom(this.x).tickFormat(domainValue =>
            formatter(
              this.graphDataMerged.lineChart.axis.x.format,
              domainValue,
              this.graphDataMerged.lineChart.axis.x.currency,
            ),
          ),
        );
    }

    if (this.graphDataMerged.lineChart.axis.y.visible) {
      this.root
        .append('g')
        .attr('class', 'y axis')
        .call(
          axisLeft(this.y).tickFormat(domainValue =>
            formatter(