Estoy trabajando en un gráfico con d3 y me gustaría saber cómo puedo trabajar con varias etiquetas. Actualmente todo funciona con una etiqueta (dólar) pero me gustaría dos o tres etiquetas. La idea es cambiar el valor de ETH también. pero solo voy a cambiar el valor en dólares.

la idea es que tenga la etiqueta tanto del valor dolar como del valor eth

 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) => [pxgetTime(), py]) 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: px, y: py, }, data: { x: scaleInvert(px, domain.x, range.x), y: scaleInvert(py, domain.y, range.y), test: '', }, } })