Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

135
Vistas
Multiple Labels d3

I'm working on graph with d3 and i would like to know how i can work with multiple labels. Currently everything works with one label (dollar) but i would like two or three labels. The idea is change de ETH value too. but I'm just getting to change the dollar value.

the idea is that I have the label of both the dollar value and the eth value

const [values, setValues] = useState([
        { x: new Date(2020, 5, 1), y: 7000, eth: 3 },
        { x: new Date(2020, 5, 2), y: 7800, eth: 3.4 },
        { x: new Date(2020, 5, 3), y: 5310, eth: 1.8 },
        { x: new Date(2020, 5, 4), y: 6000, eth: 2.8 },
        { x: new Date(2020, 5, 5), y: 8677, eth: 3.3 },
        { x: new Date(2020, 5, 6), y: 5012, eth: 1.5 },
        { x: new Date(2020, 5, 7), y: 13000, eth: 5 },
        { x: new Date(2020, 5, 8), y: 9300, eth: 4 },
        { x: new Date(2020, 5, 9), y: 4000, eth: 8 },
    ])

    const gesture = useState(true)

    const data: [number, number][] = values.map((p) => [p.x.getTime(), p.y])

    const domain = {
        x: [Math.min(...data.map(([x]) => x)), Math.max(...data.map(([x]) => x))],
        y: [
            Math.min(...data.map(([, y]) => y)),
            Math.max(...data.map(([, y]) => y)),
        ],
    }


    const range = {
        x: [0, width],
        y: [height, 0],
        eth: [height, 0],
    }

    const scale = (v: number, d: number[], r: number[]) => {
        'worklet'
        return interpolate(v, d, r, Extrapolate.CLAMP)
    }

    const scaleInvert = (y: number, d: number[], r: number[]) => {
        'worklet'
        return interpolate(y, r, d, Extrapolate.CLAMP)
    }

    const d = shape
        .line()
        .x(([x]) => scale(x, domain.x, range.x))
        .y(([, y]) => scale(y, domain.y, range.y))
        .curve(shape.curveBasis)(data) as string
    const path = parsePath(d)

    const length = useSharedValue(0)
    const point = useDerivedValue(() => {
        const p = getPointAtLength(path, length.value)

        return {
            coord: {
                x: p.x,
                y: p.y,
            },
            data: {
                x: scaleInvert(p.x, domain.x, range.x),
                y: scaleInvert(p.y, domain.y, range.y),
                test: '',
            },
        }
    })
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda