[英]d3.js: axisBottom is appearing at the top instead
我正在尝试将X轴添加到D3(v5)生成的图形的底部,如下所示。 但是,即使我正在调用axisBottom()
,X轴也会显示在顶部。 我在某处犯错误吗?
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.