How to use the d3-axis.axisBottom 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.
feedzai / brushable-histogram / src / Histogram / Histogram.js View on Github 
_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 _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(self.scaleDict[attributeName]+=0.1
}
else{
self.scaleDict[attributeName]=1.1
}
self.update()
})
graph.append('g')
.attr('class','axis visible_axis')
.call(axisLeft(yLineScale))
.attr('transform','translate('+colorRampWidth +',0)')
graph.append('g')
.attr('class','axis visible_axis')
.call(axisBottom(xLineScale))
.attr('transform', 'translate(' + colorRampWidth+',' + (startingHeight+height) + ')');
let line_function = line_generator()
.x((d:any)=>d.x)
.y((d:any)=>d.y)
.curve(curveMonotoneX)
detailViewData.data.forEach((singleData,index)=>{
//let cleaned_dataArray = singleData.map(d=>isNaN(d)? 0: d)
//detailViewData is the object to be visualized in the supplement view
let cleaned_dataArray = singleData.map((d,i)=>{
if(!isNaN(d)){
return {x: xLineScale(i), y:yLineScale(d)}
}
})
cleaned_dataArray = cleaned_dataArray.filter(d=>d)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]);
returndrawXAxis = ( svg, params ) => {
const { displayMonthOnly, height, xScale, xTicks } = params;
const { margin } = this.props;
const axis = d3AxisBottom( xScale );
axis.ticks( xTicks );
axis.tickFormat( this.dateFormatFunction( displayMonthOnly ) );
axis.tickSizeOuter( 0 );
svg
.append( 'g' )
.attr( 'class', 'line-chart__x-axis' )
.attr( 'transform', `translate(0,${ height - margin.bottom })` )
.call( axis );
};private drawAxis() {
this.xAxis=this.svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + this.height + ")")
.call(d3Axis.axisBottom(this.x).tickSize(0));
this.xAxis.selectAll("text")
.attr("x",12)
.attr("y",10)
.attr("dx", 0)
.attr("dy", 8)
.style("text-anchor", "start");
this.xAxis.append("text")
.attr("class", "axis-title")
.text("TIME")
.attr("y",40)
.attr("x",(this.width/2));
this.svg.append("g")
.attr("class", "y axis")keysList.forEach((key) => {
d[key] = d[key] || 0;
});
return d;
});
if (dataOrArray.length === 0) {
return;
}
x.domain(dataOrArray.map(d => d.label));
y.domain([0, max(dataOrArray, d => d.total)]);
z.domain(keysList);
const container = svg.append('g').attr('transform', "translate(" + margin.left + "," + margin.top + ")");
const labels = container.append("g").attr("transform", "translate(0," + chartHeight + ")").call(axisBottom(x))
.selectAll("text")
.attr("y", 0)
.attr("x", 9)
.attr("dy", ".35em")
.attr("transform", "rotate(75)")
.style("text-anchor", "start");
let maxLabelBottomPosition = height;
labels.each(function(label, index, allLabels) {
const currentLabel = allLabels[index];
const labelDimensions = currentLabel.getBoundingClientRect();
maxLabelBottomPosition = Math.max(maxLabelBottomPosition, chartHeight + labelDimensions.height + margin.bottom);
});
svg.attr('style', 'width:' + width +'px;height:' + maxLabelBottomPosition +'px;');
container.append("text")} else {
this.focus.selectAll('.axis--x').call(
d3Axis
.axisBottom(this.x)
.ticks(checkDataLengthNumber[`ticks`])
.tickFormat(d3TimeFormat.timeFormat('%m / %d'))
);
}
} else {
this.focus
.selectAll('.axis--x')
.call(d3Axis.axisBottom(this.x).ticks(ticksLengthNumber));
}
this.focus.selectAll('.axis--x.zoom-axis').call(
d3Axis
.axisBottom(this.x)
.ticks(10)
.tickFormat(d3TimeFormat.timeFormat('%b / %d'))
);
this.svg
.select('.zoom')
.call(
this.zoom.transform,
d3Zoom.zoomIdentity
.scale(this.width / (s[1] - s[0]))
.translate(-s[0], 0)
);
this.updateMainAreaLabels();
this.updateTimeLineLabels();d3-axis
Displays automatic reference lines for scales.
