Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

134
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda