X和Y轴不在一起

Question

这是我的轴的图像

如您所见，它们相距很远，我不知道为什么。这是我用来创建它们的代码：


        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，但我不知道该怎么做

Answer 1

这种偏移的原因是您在下面的代码行中添加了水平平移，这里第一个参数指定了 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>

X和Y轴不在一起

X and Y axis are not together

d3.js