7 replies

✅ – Nesho – 10-41 Feb 25

Hello, I'm using d3 to render charts. I have a problem with generating an area with

d3.area

d3.area

, the area is being generated outside of my svg size, even though I'm giving the y-scale the same size as my svg. Any ideas?

export function useD3Scales<T>({ data, xKey, yKey }: Options<T>) {
  const { width, height, margin } = useResponsiveContainerSize();

  const xScale = d3
    .scaleTime()
    .domain(
      d3.extent(data, (d, i) => {
        return xKey ? xKey(d) : i;
      })
    )
    .range([margin.left, width - margin.right]);

  const yScale = d3
    .scaleLinear()
    .domain(d3.extent(data, (d) => d[yKey]))
    .range([height - margin.bottom, margin.top]);

  return { xScale, yScale };
}

export function useD3Scales<T>({ data, xKey, yKey }: Options<T>) {
  const { width, height, margin } = useResponsiveContainerSize();

  const xScale = d3
    .scaleTime()
    .domain(
      d3.extent(data, (d, i) => {
        return xKey ? xKey(d) : i;
      })
    )
    .range([margin.left, width - margin.right]);

  const yScale = d3
    .scaleLinear()
    .domain(d3.extent(data, (d) => d[yKey]))
    .range([height - margin.bottom, margin.top]);

  return { xScale, yScale };
}

✅ – Nesho – 10-41 Feb 25

Similar Threads