I'm trying to add an X-axis to the bottom of my D3 (v5) generated graph, as below. However, the X-axis appears at the top, even though I am calling axisBottom()
. Is there a mistake that I'm making somewhere?
results = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
y: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
y1: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
}
const W = 1000,
H = 620,
margin = {
top: 20,
right: 80,
bottom: 30,
left: 50,
};
const width = W - margin.left - margin.right,
height = H - margin.top - margin.bottom;
let scaleX = d3.scaleLinear()
.domain([results.x[0], results.x[results.x.length-1]]) // x is produced by numpy.linspace
.range([0, width]);
let ymax = Object.keys(results)
.filter(k => k !== 'x')
.map(k => d3.max(results[k].y))
.reduce((x, y) => Math.max(x, y), -Infinity);
let scaleY = d3.scaleLinear()
.domain([0, ymax])
.range([height, 0]);
let xAxis = d3.axisBottom(scaleX);
let svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
svg.append("g")
.attr("class", "x axis")
.call(xAxis);
I've attached an image for reference: axis appears right at the top of the SVG element; I expected it to appear at the bottom instead.
According to the documentation d3.axisBottom
Constructs a new bottom-oriented axis generator for the given scale, with empty tick arguments, a tick size of 6 and padding of 3. In this orientation, ticks are drawn below the horizontal domain path.
So, you still have to translate the axis.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.