搜索和聚焦

在完整模式，标题带有搜索框（放大镜，或按Shift+J）：开始输入，它会模糊匹配节点标签，然后聚焦您选择的任何内容。可以通过编程方式使用相同的相机控制 - graph.focusElement(node) 平移和缩放到节点，graph.highlightElement(node) 吸引对其的注意。

使用图表上方的搜索框或下方的按钮直接跳转至城市。

焦点选项数据

// Programmatic camera control. focusElement pans and zooms to an element;
// highlightElement adds a visual emphasis class (clearHighlightedElements removes
// it). Fetch the live node with getMutableNode so it resolves to the rendered one.
function focusNode(graph, id) {
    const node = graph.getMutableNode(id)
    if (!node) return
    graph.clearHighlightedElements()
    graph.focusElement(node)
    graph.highlightElement(node)
}

// Drop the highlight and zoom back out to the whole graph.
function showAll(graph) {
    graph.clearHighlightedElements()
    graph.renderer.fitAndCenter()
}

// Full mode ships the built-in search box in the header (the magnifier, or
// Shift+J). Typing fuzzy-matches node labels; picking a result focuses it.
const options = {
    // Off: `full` mode brings a minimap and the data dock, and this card is about
    // neither (see the Minimap and Data table cards for those).
    UI: { mode: 'full', minimap: false, table: false }
}

// A dozen cities wired into a route network — enough that finding one by eye is
// annoying, which is the whole point of search + focus.
const data = {
    nodes: [
        { id: 'paris', data: { label: 'Paris' } },
        { id: 'london', data: { label: 'London' } },
        { id: 'berlin', data: { label: 'Berlin' } },
        { id: 'madrid', data: { label: 'Madrid' } },
        { id: 'rome', data: { label: 'Rome' } },
        { id: 'vienna', data: { label: 'Vienna' } },
        { id: 'prague', data: { label: 'Prague' } },
        { id: 'lisbon', data: { label: 'Lisbon' } },
        { id: 'warsaw', data: { label: 'Warsaw' } },
        { id: 'oslo', data: { label: 'Oslo' } },
        { id: 'dublin', data: { label: 'Dublin' } },
        { id: 'athens', data: { label: 'Athens' } }
    ],
    edges: [
        { from: 'london', to: 'paris' },
        { from: 'london', to: 'dublin' },
        { from: 'paris', to: 'madrid' },
        { from: 'madrid', to: 'lisbon' },
        { from: 'paris', to: 'berlin' },
        { from: 'berlin', to: 'prague' },
        { from: 'prague', to: 'vienna' },
        { from: 'vienna', to: 'rome' },
        { from: 'berlin', to: 'warsaw' },
        { from: 'warsaw', to: 'oslo' },
        { from: 'vienna', to: 'athens' }
    ]
}

搜索和聚焦 ​

搜索和聚焦