這是我的軸的樣子
如您所見，它們相距甚遠，我不知道為什么。這是我用來創建它們的代碼：
margin = ({top: 40, right: 20, bottom: 40, left: 50});
height = 500 - margin.top - margin.bottom;
width = 600 - margin.left - margin.right;
// Crear el svg
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// Cálculo de ejes
x = d3.scaleTime()
.domain([2015, 2021]).nice()
.range([margin.left, width - margin.right]);
y = d3.scaleLinear()
.domain([0,
13]).nice()
.range([height - margin.bottom, margin.top]);
svg.append("g")
.attr("transform", `translate( ${margin.left}, ${height -
margin.bottom})`)
.call(d3.axisBottom(x).tickFormat(d3.format("d")));
svg.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y))
我的目標是堅持 0 和 2015 但我不知道該怎么做
uj5u.com熱心網友回復：
這種偏移的原因是您在下面的代碼行中添加的水平平移，這里的第一個引數指定 x 軸的水平平移，因為這兩個軸彼此不相交。
.attr("transform", `translate( ${margin.left}, ${height - margin.bottom})`)
只需將其更改為零即可解決問題。我在下面為此添加了片段
顯示代碼片段
margin = ({
top: 40,
right: 20,
bottom: 40,
left: 50
});
height = 500 - margin.top - margin.bottom;
width = 600 - margin.left - margin.right;
// Crear el svg
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// Cálculo de ejes
x = d3.scaleTime()
.domain([2015, 2021]).nice()
.range([margin.left, width - margin.right]);
y = d3.scaleLinear()
.domain([0,
13
]).nice()
.range([height - margin.bottom, margin.top]);
svg.append("g")
.attr("transform", `translate( 0, ${height -
margin.bottom})`)
.call(d3.axisBottom(x).tickFormat(d3.format("d")));
svg.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y))<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/404444.html
標籤：