How to use the d3-axis.axisTop 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.
nasa / openmct / src / plugins / timeConductor / ConductorAxis.vue View on Github 
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.parser = this.timePattern_exists() ? d3TimeParse(this.timePattern() as string) : null;
this.parserInvert = this.timePattern_exists() ? d3TimeFormat(this.timePattern() as string) : null;
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) {import { LitElement } from 'lit-element';
import { capitalize, shapeProperties } from '../helper/utils.js';
import * as axis from 'd3-axis';
const instance = axis.axisTop();
const keys = Object.keys(instance || {});
const props = shapeProperties(keys);
class D3Axis extends LitElement {
static get properties() {
return {
...props,
type: {
type: String,
},
domain: {useEffect(() => {
if (ref.current) {
const nTicks = (isScaleContinuous(scale) ? scale.ticks() : scale.domain()).length;
const formatter = isScaleContinuous(scale) ? d3Format("~s") : (d: any) => d;
const tickFormat =
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]);
returnconstructor(svgElement) {
super(svgElement);
this.axis = axisTop(this._xScale);
this.gAxis = this.gMain.append('g')
}}
if (hours) {
output = hours + 'h ' + output
}
if (days) {
output = days + 'd ' + output
}
return output
}
var xScale
var xAxis
if (orient == 'bottom') {
xAxis = axisBottom()
} else if (orient == 'top') {
xAxis = axisTop()
}
if (timeIsLinear) {
xScale = scaleLinear()
.domain([beginning, ending])
.range([margin.left, width - margin.right])
xAxis
.scale(xScale)
.tickFormat(formatDays)
.tickValues(range(0, ending, 86400))
} else {
xScale = scaleTime()
.domain([beginning, ending])
.range([margin.left, width - margin.right])
xAxisprivate build() {
this.width = 550;
this.visibleXAxis = axisTop(this.x).tickFormat(format('d'));
this.extremesXAxis = axisTop(this.x2);
select('#col2')
.style('width', (this.width + Config.collapseSlopeChartWidth) + 'px');
const dropdownMenu = select('.navbar-collapse')
.append('ul').attr('class', 'nav navbar-nav navbar-left').attr('id', 'treeLayoutMenu');
const list = dropdownMenu.append('li').attr('class', 'dropdown');
list
.append('a')
.attr('class', 'dropdown-toggle')
.attr('data-toggle', 'dropdown')
.attr('role', 'button')
.html('Tree Layout')
.append('span')if (minutes) {
output = minutes + 'm ' + output;
}
if (hours) {
output = hours + 'h ' + output;
}
if (days) {
output = days + 'd ' + output;
}
return output;
};
if (orient == "bottom") {
xAxis = axisBottom();
} else if (orient == "top") {
xAxis = axisTop();
}
if (timeIsLinear) {
xScale = scaleLinear()
.domain([beginning, ending])
.range([margin.left, width - margin.right]);
xAxis.scale(xScale)
.tickFormat(formatDays)
.tickValues(range(0, ending, 86400));
} else {
xScale = scaleTime()
.domain([beginning, ending])
.range([margin.left, width - margin.right]);
xAxis.scale(xScale)
.tickFormat(tickFormat.format)d3-axis
Displays automatic reference lines for scales.
