[英]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.