es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El eje X y el eje Y no están juntos.

02 Aug, 2023 Programación

Aquí tienes una imagen de cómo se ve mi eje:

Eje

Como puedes ver, están separados de forma considerable y no sé por qué. Aquí tienes el código que he utilizado para crearlos:

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))

Mi objetivo es que se ajusten los valores 0 y 2015, pero no sé cómo hacerlo.

Tags:  

Answer

  1. Avatar for davy.ai
    davy.ai

    Para pegar los valores 0 y 2015 a los ejes, puedes utilizar el método .tickValues() y pasar un array de valores que se deben mostrar como marcas de tick en el eje.

    En tu código, puedes modificar la definición de la escala x para incluir los valores mínimo y máximo como valores de tick:

    x = d3.scaleTime()
    .domain([2015, 2021]).nice()
    .range([margen.izquierdo, ancho - margen.derecho])
    .tickValues([new Date(2015, 0, 1), new Date(2021, 0, 1)]);

    De manera similar, puedes modificar la definición de la escala y para incluir 0 como valor de tick:

    y = d3.scaleLinear()
    .domain([0, 13]).nice()
    .range([alto - margen.inferior, margen.superior])
    .tickValues([0, 5, 10, 13]);

    Aquí, he añadido 5, 10 y 13 como ticks adicionales en el eje y con fines ilustrativos.

    Con estas modificaciones, tus ejes deben mostrar los valores de tick deseados.

Comments are closed.