Plot.plot({
height: 280,
style: "cursor: pointer;",
marks: [
Plot.barX(rects, {
x1: "start",
x2: "end",
fill: "something",
y: "n",
inset: 1
}),
Plot.barX(
rects,
Plot.pointerY({
x1: "start",
x2: "end",
y: "n",
inset: 1,
fill: "red",
render(index, scales, values, dimensions, context, next) {
const [i] = index;
if (i !== undefined) {
const X1 = values.channels.x1.value;
const X2 = values.channels.x2.value;
index = d3
.range(X1.length)
.filter((j) => X1[j] <= X1[i])
.filter((j) => X2[j] >= X2[i]);
}
return next(index, scales, values, dimensions, context);
}
})
),
Plot.text(rects, {
x1: "start",
x2: "end",
x: (d) => (d.start + d.end) / 2,
fill: "white",
text: (d) => `${d.start}..${d.end}`,
y: "n"
})
]
})