_xAxis() { const { _xScale } = this; return d3 .axisBottom() .scale(_xScale()) .tickSize(480) .ticks(4); }
this.container.append('g') .attr('class', 'axis x') .attr('transform', `translate(0, ${this.innerHeight - 10})`) .call(d3.axisBottom(x).tickFormat(d => `S${(d - (d % 100)) / 100}E${d % 100}`))
_xAxis(el) { const { _xScale } = this; const xAxis = d3 .axisBottom() .scale(_xScale()) .ticks(5); d3.select(el).call(xAxis); d3.select('g.axis') .selectAll('text') .attr('dx', 50) .style('display', d => d === 5 && 'none'); }
render() { let graphTranslate = `translate(${this.props.margin.left}, ${this.props.margin.top})`; let xAxisTranslate = `translate(0, ${this.props.height.inner})`; let yAxisTranslate = `translate(0,0)`; let drawAxis = (axis,method) => { d3.select(axis) .call(method); }; return ( <g className="histogram" transform={graphTranslate}> {this.state.bins.map(this.drawBars)} <g className="axis x-axis" transform={xAxisTranslate} ref={(axis) => drawAxis(axis,d3.axisBottom(this.x))}></g> <g className="axis y-axis" transform={yAxisTranslate} ref={(axis) => drawAxis(axis,d3.axisLeft(this.y))}></g> </g> ); }
d3.axisBottom().scale(this.x) .tickValues(this.x.domain().filter((d, i) => !(i % 5)))
d3.axisBottom().scale(x), d3.axisTop().scale(x).ticks(5), d3.axisBottom().scale(x).tickSize(10, 5, 10), d3.axisTop().scale(x).tickValues([0, 20, 50, 70, 100]) .tickFormat((d, i) => ['a', 'e', 'i', 'o', 'u'][i]),
useCallback( g => { return g .attr("class", "x axis") .attr("transform", `translate(0,${HEIGHT - MARGIN.bottom})`) .call(d3.axisBottom(x)) .call(g => g.select(".domain").remove()) .call(g => g .append("text") .attr("x", WIDTH - MARGIN.right) .attr("y", -4) .attr("fill", "#000") .attr("font-weight", "bold") .attr("text-anchor", "end") .text("Miles per gallon") ); }, [x] )
.attr("class", "axis") .attr("transform", `translate(${ margin.left }, ${ margin.top + height })`) .call(d3.axisBottom( xScale )) .selectAll("text") .attr("y", 7)
.range([height - margin.top - margin.bottom, margin.top]); const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale);
.range([height, 0]) let xAxis = d3.axisBottom() .scale(x)
.attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x));
.range([height, 0]) let xAxis = d3.axisBottom() .scale(x)
_xAxis(xScale) { return d3 .axisBottom() .scale(xScale) .tickSizeInner(510) .ticks(10); }
.range([height - margin.top - margin.bottom, margin.top]); const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale);
.range([height - margin.top - margin.bottom, margin.top]); const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale);