Searched node doesn't come at center on the very first time. What is the significance of _centered?

[saaagarsingh]

When I'm trying to search for a node I want it to be highlighted and positioned at center of my page but when all the nodes are collapsed and I'm trying to search for a node my node gets highlighted but it is not coming at the center of the page. Tried using the setCentered method as well and _centered property as well but nothing seems to work. Is there a possible way to align it center on every search like if my chart is collapsed and I try to search for a node it will be centered.

Also just for information after setHighlighted I've appended initialZoom(1).

Expected behavior Expected behaviour is that it should show the searched node at the center,

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: MAC Browser- chrome Smartphone (please complete the following information): Device: [e.g. iPhone6] OS: [e.g. iOS8.1] Browser [e.g. stock browser, safari] Version [e.g. 22]

[bumbeishvili]

Not sure how to approach that

This is how I implemented node search

https://stackblitz.com/edit/js-wdexqc?file=index.html

[eSaner]

chart.data(data).setCentered(results[0]).initialZoom(1).render() worked for me, where results[] gets filled as nodes are highlighted. Just need to add a conditional to make sure there's only one result.

let chart;

function filterChart(e) {
  // Get input value
  const value = e.srcElement.value;

  // Clear previous higlighting
  chart.clearHighlighting();

  // Get chart nodes
  const data = chart.data();

  // Mark all previously expanded nodes for collapse
  data.forEach((d) => (d._expanded = false));

  // Loop over data and check if input value matches any name
  const results = [];
  data.forEach((d) => {
    if (value != '' && d.name.toLowerCase().includes(value.toLowerCase())) {
      // If matches, mark node as highlighted
      d._highlighted = true;
      d._expanded = true;
      results.push(d.id);
    }
  });

  // Update data and rerender graph
  if (results.length === 1) {
    // Center and zoom in to a single result
    chart.data(data).setCentered(results[0]).initialZoom(1).render();
  } else {
    // Fit chart to show all results
    chart.data(data).render().fit();
  }
}