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: '',
},
}
})