How to use the d3-axis.axisRight function in d3-axis

To help you get started, we’ve selected a few d3-axis examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github jackz3 / ionic-stock-app / src / pages / details / stockchart.ts View on Github external
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)
github yubowenok / visflow / client / src / components / visualization / axis.ts View on Github external
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();
  }
github kristw / d3kit-timeline / src / main.js View on Github external
drawAxes() {
    const options = this.options();

    let axisTransform;

    switch(options.direction){
      case 'right':
        this.axis = axisLeft();
        axisTransform = 'translate('+(0)+','+(0)+')';
        break;
      case 'left':
        this.axis = axisRight();
        axisTransform ='translate('+(this.getInnerWidth())+','+(0)+')';
        break;
      case 'up':
        this.axis = axisBottom();
        axisTransform ='translate('+(0)+','+(this.getInnerHeight())+')';
        break;
      case 'down':
        this.axis = axisTop();
        axisTransform = 'translate('+(0)+','+(0)+')';
        break;
    }

    this.layers.get('main')
      .attr('transform', axisTransform);

    const formatAxis = options.formatAxis || identity;
github hpcc-systems / Visualization / packages / chart / src / Axis.ts View on Github external
break;
            default:
        }
        if (this._prevOrientation !== this.orientation()) {
            switch (this.orientation()) {
                case "left":
                    this.d3Axis = d3AxisLeft(this.d3Scale);
                    this.d3Guides = d3AxisLeft(this.d3Scale);
                    break;
                case "top":
                    this.d3Axis = d3AxisTop(this.d3Scale);
                    this.d3Guides = d3AxisTop(this.d3Scale);
                    break;
                case "right":
                    this.d3Axis = d3AxisRight(this.d3Scale);
                    this.d3Guides = d3AxisRight(this.d3Scale);
                    break;
                case "bottom":
                default:
                    this.d3Axis = d3AxisBottom(this.d3Scale);
                    this.d3Guides = d3AxisBottom(this.d3Scale);
                    break;
            }
            this._prevOrientation = this.orientation();
            if (this.svgAxis) {
                this.svgAxis.html("");
            }
            if (this.svgGuides) {
                this.svgGuides.html("");
            }
        }
github globeandmail / chart-tool / src / js / charts / components / axis.js View on Github external
export function axisFactory(axisObj, scale) {
  switch (axisObj.orient) {
    case 'left': return axisLeft(scale);
    case 'right': return axisRight(scale);
    case 'bottom': return axisBottom(scale);
  }
}
github hpcc-systems / Visualization / packages / chart / src / Axis.ts View on Github external
this.formatter = this.tickFormat_exists() ? d3TimeFormat(this.tickFormat()) : null;
                break;
            default:
        }
        if (this._prevOrientation !== this.orientation()) {
            switch (this.orientation()) {
                case "left":
                    this.d3Axis = d3AxisLeft(this.d3Scale);
                    this.d3Guides = d3AxisLeft(this.d3Scale);
                    break;
                case "top":
                    this.d3Axis = d3AxisTop(this.d3Scale);
                    this.d3Guides = d3AxisTop(this.d3Scale);
                    break;
                case "right":
                    this.d3Axis = d3AxisRight(this.d3Scale);
                    this.d3Guides = d3AxisRight(this.d3Scale);
                    break;
                case "bottom":
                default:
                    this.d3Axis = d3AxisBottom(this.d3Scale);
                    this.d3Guides = d3AxisBottom(this.d3Scale);
                    break;
            }
            this._prevOrientation = this.orientation();
            if (this.svgAxis) {
                this.svgAxis.html("");
            }
            if (this.svgGuides) {
                this.svgGuides.html("");
            }
        }
github contiamo / operational-visualizations / packages / visualizations / src / Axis.tsx View on Github external
maxNumberOfTicks !== undefined && nTicks > maxNumberOfTicks
          ? (d: any, i: number) => (i % maxNumberOfTicks === 0 ? formatter(d) : null)
          : formatter;

      switch (position) {
        case "bottom":
          select(ref.current).call(axisBottom(scale).tickFormat(tickFormat));
          break;
        case "top":
          select(ref.current).call(axisTop(scale).tickFormat(tickFormat));
          break;
        case "left":
          select(ref.current).call(axisLeft(scale).tickFormat(tickFormat));
          break;
        case "right":
          select(ref.current).call(axisRight(scale).tickFormat(tickFormat));
          break;
      }
    }
  }, [ref, scale, position, maxNumberOfTicks]);
  return

d3-axis

Displays automatic reference lines for scales.

ISC
Latest version published 3 years ago

Package Health Score

71 / 100
Full package analysis