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 elemento de grupo no comienza en 0,0 dentro del SVG.

19 Jun, 2023 Programación

Estoy probando d3.js con svelte, y comencé a hacer un gráfico de barras simple, pero me enfrenté a un problema que no pude resolver. El problema es que el elemento de grupo g dentro del elemento svg, que contiene las barras, se desplaza inicialmente desde el origen del elemento svg (la esquina superior izquierda). Este es el código.

<script>
  import * as d3 from 'd3';
  let data = [
    { name: 'Manzana', amount: 20 },
    { name: 'Naranja', amount: 80 },
    { name: 'Plátano', amount: 50 },
    { name: 'Uvas', amount: 10 },
  ];

  let width = 600;
  let height = 400;

  let margins = { top: 20, right: 20, bottom: 100, left: 100 };

  let innerWidth = width - margins.left - margins.right;
  let innerHeight = height - margins.top - margins.bottom;

  const xScale = d3
    .scaleBand()
    .domain(data.map((d) => d.name))
    .range([0, innerWidth])
    .paddingInner(0.1);
  const yScale = d3
    .scaleLinear()
    .domain([0, d3.max(data, (d) => d.amount)])
    .range([innerHeight, 0]);
</script>

<div class="canvas">
  <svg {width}="" {height}="">
    <g>
      {#each data as d}
        <rect width="{xScale.bandwidth()}" height="{innerHeight" -="" yscale(d.amount)}="" x="{xScale(d.name)" +="" xscale.bandwidth()="" 2}="" y="{yScale(d.amount)}"></rect>
      {/each}
    </g>
  </svg>
</div>

<style>
  .canvas {
    margin-top: 100px;
    width: 600px;
    height: 400px;
    background-color: #fff;
  }
</style>

Estaba esperando que el elemento de grupo g comenzara en (0,0) del elemento svg (la esquina superior izquierda), pero está desplazado en x sin ningún atributo transform en el elemento g. Esto está afectando cuando intento desplazar el elemento de grupo adecuadamente para agregar ejes más tarde. Mi pregunta es: ¿por qué hay un desplazamiento inicial?

Aquí están los elementos svg y g como aparecen en la pantalla.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El desplazamiento inicial del elemento de grupo g se debe a los márgenes izquierdo y superior que se establecen en el código de JavaScript:

    let margins = { top: 20, right: 20, bottom: 100, left: 100 };

let innerWidth = width - margins.left - margins.right;
let innerHeight = height - margins.top - margins.bottom;

    Estos márgenes se usan para calcular las variables innerWidth e innerHeight, que luego se utilizan para establecer el rango de las escalas x e y.

    Por lo tanto, cuando se posicionan los elementos rect utilizando las escalas x e y, se posicionan en función de los márgenes izquierdo y superior, lo que provoca que el elemento de grupo g se desplace desde el origen del elemento svg.

    Para solucionar esto, puede actualizar las escalas x e y para tener en cuenta los márgenes izquierdo y superior, como sigue:

    const xScale = d3
  .scaleBand()
  .domain(data.map((d) => d.name))
  .range([margins.left, width - margins.right])
  .paddingInner(0.1);
const yScale = d3
  .scaleLinear()
  .domain([0, d3.max(data, (d) => d.amount)])
  .range([height - margins.bottom, margins.top]);

    Esto posicionará los elementos rect en relación con el origen del elemento svg.

Comments are closed.