Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

search for a node through the data values of the node itself #294

Closed
SamurayYata opened this issue Aug 2, 2023 · 3 comments
Closed

search for a node through the data values of the node itself #294

SamurayYata opened this issue Aug 2, 2023 · 3 comments
Labels
question Further information is requested

Comments

@SamurayYata
Copy link

how can i lookup a node by the values of that node and focus it by expanding all parents and siblings

@bumbeishvili
Copy link
Owner

bumbeishvili commented Aug 2, 2023

If you have a search box, roughly you need to do the following:

  1. Listen to seach input change event
  2. In the handler function, get chart data
  3. Find all nodes which match your search and set _expanded to it (you can also use _selected)
  4. rerender graph

Rough implementation

function handleSearch(searchText) {
  const data = chart.data();
  data.forEach(d => {
    if (d.nameOrOtherProperty.includes(searchText)) {
      d._expanded = true;  // if you just want expand
      d._selected = true;    // if you also want it to be selected, not remember if it's possible to select multiple nodes so not sure if this will work
    }
  })

  chart.data(data).render()

}

@SamurayYata
Copy link
Author

SamurayYata commented Aug 2, 2023

1 node {value 10}
.... 2 node {value 20}
..... 3 node {value 30}
........ 4 node {value 40 }
5 node {value 50}
.... 6 node {value 60}

if i want to search value 30 (passed value at my function) i want expand parents at the end my node.
it's possible to do this?

@bumbeishvili
Copy link
Owner

Yes, you can use following code. Probably not precise, but it will give you directions

function handleSearch(searchText) {
  const data = chart.data();
  data.forEach(d => {
    if (d.value.includes(searchText)) {
      d._expanded = true;  // if you just want expand
      d._selected = true;    // if you also want it to be selected, not remember if it's possible to select multiple nodes so not sure if this will work
    }
  })

  chart.data(data).render()

}

@bumbeishvili bumbeishvili added the question Further information is requested label Sep 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants