2

I need to create a visualization in d3.js. I've looked through the gallery and other examples as well as SO without much success.

I want the user to be able to select text within a window as illustrated below. The user types in a string into a separate box, and the entire string is displayed. The user should then be able to select a series of contiguous letters using a "slider".

The text selected should then be available in a variable.

What I'm thinking about looks like this:

enter image description here

The sites labeled 'A' and 'C' are the endpoints in the image.

I'm not sure where exactly to begin with this; I couldn't find any similar examples out there. What would be the best way to design such a slider only using D3?

saladi
  • 3,103
  • 6
  • 36
  • 61
triangulum
  • 21
  • 3
  • [This](https://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text) may be relevant. Not really a slider, but gets highlighted text. – pmkro May 14 '19 at 17:54
  • You could try d3-brush: https://github.com/d3/d3-brush. Especially if you're using a fixed-width font, the brush can snap to the space between letters since those are equal increments. – anbnyc May 14 '19 at 21:53
  • Thanks @anbnyc! I ended up using d3-brush to do this task. – triangulum May 20 '19 at 21:28

0 Answers0