Javascript d3.js:axisBottom显示在顶部
我试图在D3(v5)生成的图形的底部添加一个X轴,如下所示。但是,X轴显示在顶部,即使我正在调用Javascript d3.js:axisBottom显示在顶部,javascript,d3.js,data-visualization,visualization,axis-labels,Javascript,D3.js,Data Visualization,Visualization,Axis Labels,我试图在D3(v5)生成的图形的底部添加一个X轴,如下所示。但是,X轴显示在顶部,即使我正在调用axisBottom()。我在什么地方犯了错误吗 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
axisBottom()
。我在什么地方犯了错误吗
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);
我附上了一张图片供参考:axis显示在SVG元素的顶部;我希望它会出现在底部 根据文件 为给定比例构造一个新的面向底部的轴生成器,带有空刻度参数,刻度大小为6,填充为3。在此方向中,在水平域路径下方绘制记号 所以,你仍然需要平移轴