Datentabelle

UI.table teilt ein Datendock vom unteren Rand der Arbeitsfläche: die Knoten und Kanten des Diagramms als sortierbares, auswählbares Raster. Das liegt daran, dass ein Kräftelayout drei Dinge, die Menschen ständig tun, strukturell schlecht beherrscht: genaue Werte lesen, maßstabsgetreu auswählen und herausfinden, wo man anfangen soll.

Die beabsichtigte Schleife ist Tabelle zum Suchen, Arbeitsfläche zum Verstehen, Seitenleiste zum Lesen: Sortieren Sie nach Grad, um die Hubs zu erkennen, klicken Sie bei gedrückter Umschalttaste auf die obersten zwanzig und reagieren Sie mit den Massenaktionen der Seitenleiste darauf.

const options = {
    UI: { mode: 'full' },
}

Das ist alles was es braucht. Im full-Modus befindet sich das Dock unten an die Kopfleiste geklappt; Klicken Sie auf das Chevron oder drücken Sie Shift+T, um die Tabelle anzuzeigen. UI.table: false entfernt es vollständig.

Es gibt bewusst keine Symbolleistenschaltfläche dafür. Die Leiste ist die Steuerung: Die Pillen in der oberen Leiste öffnen alle etwas über der Arbeitsfläche, während das Dock ein geteilter Bereich ist, der Ihnen bereits sein eigenes Chevron zeigt.

Das Dock ist nur im full-Modus verfügbar – es ist eine Rasterzeile neben der Seitenleiste, und die anderen Modi versprechen eine Arbeitsfläche ohne so viel Chrom.

An der Tabelle ändert sich nichts, was Sie nicht von ihr verlangt haben

Das Dock verändert nichts. Es spiegelt das Diagramm wider und steuert die Auswahl; Das Ausblenden und Anheften bleibt bei den Massenaktionen der Seitenleiste und das Wiederherstellen eines ausgeblendeten Knotens bleibt beim Filterfeld. Was das Dock hinzufügt, ist ein weitaus besseres Instrument zum Aufbau der Auswahl, nach der diese handeln.

Das Einzige, was sich ändern kann, ist, was auf der Arbeitsfläche zeigt, und das nur auf Anfrage: Die Schaltfläche Auf Diagramm anwenden blendet die Elemente aus, die Ihre Spaltenfilter auslassen. Bis Sie darauf drücken, dient das Eingrenzen einer Spalte dem Lesen und nicht dem Filtern.

Es listet das gesamte Diagramm auf

Die Tabelle spiegelt nicht die Arbeitsfläche wider. Es listet jeden Knoten auf – und auf der Registerkarte „Kanten“ jede Kante – einschließlich der derzeit ausgeblendeten, und in der führenden Spalte Visibility steht, wo sich jeder befindet:

Wert	Gestaltung	Bedeutung
visible	ruhig, ungetönt	Jetzt auf der Arbeitsfläche
filtered	Bernsteinchip	Durch einen Filter ausgeblendet – einen Knotenfilter oder für eine Kante, deren Ebene ausgeschaltet ist. Wechseln Sie den Filter, um ihn zurückzubekommen
excluded	roter Chip	Ein von Hand versteckter Knoten; Stellen Sie es aus der Liste der ausgeblendeten Knoten im Filterbereich wieder her
nested	gestrichelter Umriss	Ein Knoten innerhalb eines Clusters, den die Arbeitsfläche geschlossen hat, oder eine Kante mit einem Ende in einem: Seine Linie wird zum Cluster gezeichnet. Nichts hat es gefiltert; Öffnen Sie den Cluster, um ihn anzuzeigen
endpoint	neutraler Umriss	Eine Kante, deren Ende herausgefiltert wurde. Am Rand selbst wurde nichts gemacht

Jeder Staat unterscheidet sich in Gewicht und Rand sowie in der Farbe, sodass die Spalte ohne Rücksicht auf den Farbton gelesen wird. Die gesamte Zeile eines ausgeblendeten Elements wird ebenfalls zurückgezogen, sodass der Blick auf das, was tatsächlich gezeichnet wird, erhalten bleibt.

Eine Kante liest endpoint vor filtered, weil das der Grund ist, den Sie zuerst beheben müssen: Solange ein Knoten, den sie berührt, verschwunden ist, kann das erneute Einschalten seiner Ebene die Kante nicht wiederherstellen.

Das ist Absicht. „23 Knoten ausgeblendet“ ist eine Behauptung, die Sie überprüfen können sollten, und eine Tabelle, die die gesuchten Zeilen stillschweigend löscht, ist schlimmer als keine Tabelle. Sortieren Sie nach Visibility, um genau zu sehen, was ein Filter entfernt hat.

Knoten innerhalb von Clustern

Der Inhalt eines Clusters erhält ebenfalls Zeilen als Peers der eigenen Knoten des Diagramms, wobei eine Cluster-Spalte den Pfad angibt, von dem sie kamen (Team B / Squad, ganz außen zuerst) und eine Children-Spalte, die angibt, wie groß jeder Cluster ist. Beide Spalten erscheinen immer dann, wenn das Diagramm Cluster aufweist. Der Schalter Nested nodes des Headers entfernt diese Zeilen wieder, wenn Sie nur die oberste Ebene wünschen, und UI.table.nested: false bietet sie überhaupt nicht an.

Sie werden absichtlich flach und nicht eingerückt unter ihrem Cluster aufgelistet: Die Tabelle dient dazu, Fragen zu beantworten, die der Canvas nicht beantworten kann – welche Knoten sind die Hubs, welche über einem Schwellenwert liegen – und das funktioniert nur dann weiter, wenn eine Sortierung oder ein Filter jede Zeile gleichermaßen erreicht. Ein Baum kann immer nur Geschwister sortieren.

Es ist wichtig zu wissen, dass ein verschachtelter Knoten von diesem Diagramm nicht gezeichnet wird. Ein offener Cluster rendert einen eigenen Untergraphen, also:

• Visibility liest nested, während alle Cluster über dem Knoten geschlossen sind, und visible, sobald sie alle geöffnet sind. Es ist nie filtered – kein Filter hat es dort platziert.
• Degree zählt die realen Kanten des Knotens. Während der Cluster geschlossen ist, werden sie stattdessen vom Canvas zum Cluster gezogen. Dies ist also die eigene Zählung des Knotens und keine Beschreibung des Bildes.
• Durch Klicken auf die Zeile wird der Knoten ausgewählt, sodass er in der Seitenleiste angezeigt werden kann – oft die einzige Möglichkeit, ihn zu erreichen. Die Arbeitsfläche umringt den geschlossenen Cluster, der dafür steht. Ein Doppelklick öffnet diesen Cluster, eine Ebene pro Tastendruck. Bei render.enableNodeExpansion: false bleibt der Cluster geschlossen und die Ansicht wird stattdessen darauf zentriert.

Sortieren und Eingrenzen

Klicken Sie zum Sortieren auf eine beliebige Spaltenüberschrift. Klicken Sie erneut, um umzukehren. Bei filterbaren Spalten wird in der Kopfzeile ein Steuerelement angezeigt, das die Zeilen eingrenzt – jede Spalte in der abgeleiteten Menge hat eines, und eine Spalte, die Sie selbst deklarieren, erhält eines, indem Sie nach filterable: true fragen.

Welches Steuerelement Sie erhalten, hängt von der type der Spalte ab, sodass Sie eine Spalte fragen können, was sie tatsächlich beantworten kann:

type	Kontrolle	Streichhölzer
numberRange	ein Min / Max-Paar	innerhalb des Intervalls; Jedes Ende kann leer bleiben
select · multiselect · boolean	ein Dropdown der Werte, die die Spalte enthält	genau diesen Wert oder die Zugehörigkeit, wenn es sich bei der Zelle um eine Liste handelt
text · regex · untypisiert	ein Textfeld	Teilzeichenfolge ohne Berücksichtigung der Groß- und Kleinschreibung

Das Dropdown-Menü wird aus den eigenen Werten der Spalte und nicht aus einer deklarierten Optionsliste erstellt, sodass es niemals eine Auswahl bietet, die leer zurückbleiben würde. Bei mehr als 50 unterschiedlichen Werten tritt es für das Textfeld zurück – ein so langes Dropdown-Menü ist kein Steuerelement, das jeder verwenden kann.

Ein Zeilenfilter ist nicht der Filter des Diagramms. Es verändert, was Sie gerade lesen: Die Arbeitsfläche bleibt unberührt und die Visibility-Spalte daneben gibt weiterhin die Wahrheit an, sodass die beiden anderer Meinung sein können, ohne dass eine von beiden falsch liegt. Ihre Verengung auf die Arbeitsfläche zu übertragen, ist ein separater und expliziter Akt – siehe unten.

Die Anzahl der Docks spiegelt beides wider: 40 nodes wird zu 12 of 40 nodes, sobald Sie den Wert eingrenzen.

Anwenden der Filter auf das Diagramm

Auf Diagramm anwenden in der Symbolleiste des Docks blendet die Elemente aus, die Ihre Spaltenfilter auslassen. Es ist die Brücke zwischen den beiden Filterarten: Grenzen Sie die Zeilen ein, bis in der Tabelle aufgeführt wird, was Sie interessiert, und drücken Sie dann einmal darauf, und auf der Arbeitsfläche wird dasselbe angezeigt.

Es handelt sich um einen One-Shot-Push, nicht um einen Live-Link, und auf der Schaltfläche steht, in welchem der drei Zustände Sie sich befinden:

Knopf	Bedeutung
Apply to graph, unbeleuchtet	Es wird nichts gepusht. Deaktiviert, bis ein Spaltenfilter tatsächlich etwas einschränkt.
Clear, lit	Das Diagramm ist gefiltert und stimmt mit Ihren Filtern überein. Drücken Sie, um es wiederherzustellen.
Apply to graph, lit	Das Diagramm wird durch einen früher-Push gefiltert und Ihre Filter sind weitergegangen. Drücken Sie , um es auf den neuesten Stand zu bringen.

Zwei Eigenschaften, die es zu wissen gilt, denn sie sind es, die den Push vorhersehbar machen:

• Es verbirgt genau die Zeilen, die die Filter ausgelassen haben – niemals „nur diese anzeigen“. Ein nach dem Push hinzugefügter Knoten bleibt also auf der Arbeitsfläche. Was Sie gedrängt haben, ist eine Aussage über einen Moment, keine ständige Frage. Das Innere eines offenen Sternhaufens verengt sich nur insoweit, als seine eigenen Reihen weggelassen wurden; Wenn verschachtelte Reihen ausgeschaltet sind, werden sie nicht benannt und der Innenraum bleibt unberührt.
• Die Visibility-Spalte ist nie Teil eines Pushs, obwohl sie wie jede andere Spalte trotzdem Zeilen einschränkt. Seine Werte sind der Filterstatus des Diagramms. Wenn Sie sie also verschieben, wird alles ausgeblendet, was sich gerade auf der Arbeitsfläche befindet, und dann mit sich selbst nicht übereinstimmen.

Während ein Push aktiv ist, meldet die Zählung beide Hälften – 12 of 40 nodes · 28 hidden – und das Filterfeld erzeugt eine Aus der Tabelle Zeile, die ihn benennt und löschen kann, sodass ein Push niemals ein Filter ist, den Sie nicht finden können, sobald das Dock weggeklappt ist.

Der Push landet als einzelner Filter unter einem reservierten Schlüssel, was bedeutet, dass er mit dem Filterpanel zusammenarbeitet und nicht mit ihm konkurriert: Nichts, was Sie in der eigenen Form dieses Panels festlegen, blockiert jemals einen Push, und ein Push löscht niemals die Filter des Panels. Die beiden sind kombiniert, daher muss ein Knoten beides überleben.

Übergeben Sie filterGraph: false für ein Dock, dessen Steuerelemente niemals die Arbeitsfläche berühren können:

const options = {
    UI: { mode: 'full', table: { filterGraph: false } },
}

Auswahl von

Geste	Wirkung
Klicken Sie auf eine Zeile	Wählen Sie dieses Element aus
Strg-/Befehlstaste-Klick	Fügen Sie eine Zeile hinzu oder entfernen Sie sie
Umschalt-Klick	Nehmen Sie einen Bereich in der aktuell aufgeführten Reihenfolge
Alle auswählen	Jede aktuell aufgelistete Zeile – Nachsortierung, Nachfilterung
Doppelklicken	Wählen Sie und, um die Arbeitsfläche darauf zu zentrieren
Schweben	Markieren Sie das Element auf der Arbeitsfläche
Klicken Sie mit der rechten Maustaste	Das Kontextmenü des Elements; Eine Zeile einer Mehrfachauswahl öffnet die Auswahl

Es funktioniert in beide Richtungen: Markieren Sie eine Gruppe auf der Arbeitsfläche mit einem Gummiband, und die entsprechenden Zeilen werden markiert und zu ihnen gescrollt. Die Auswahl ist dieselbe, die in den Massenaktionen der Seitenleiste angezeigt wird, sodass die Schleife ohne zusätzliche Verkabelung geschlossen wird.

Ausgeblendete Zeilen werden wie alle anderen ausgewählt – darum geht es bei der Auflistung.

Spalten

Wenn kein columns deklariert ist, erledigt das Dock die Sache für Sie in drei Stufen:

1. Declared – UI.table.columns gewinnt auf Anhieb.
2. Aus Ihren Facetten – andernfalls, wenn Sie UI.filter.facets deklariert haben, werden Spalten daraus erstellt. Beschreiben Sie Ihre Daten einmal und das Filterpanel und die Tabelle stimmen darüber überein.
3. Gescannt – andernfalls werden die Daten gelesen, geordnet nach Abdeckung, sodass die gut gefüllten Schlüssel zuerst kommen und der spärliche Schwanz ganz rechts sitzt.

In beiden Fällen umschließen die diagrammfähigen Spalten die Daten. Für Knoten führen Visibility und Label – ein Statusbalken und der Name, die beiden Dinge, die Sie nach unten scannen, um eine Zeile zu finden – verbunden durch Cluster in einem Diagramm, das Cluster enthält, da ein verschachtelt ist row muss angeben, woher es stammt. Die Zählungen schließen es ab: Degree, plus Children in einem Diagramm mit Clustern. Die Zählwerte stehen am Ende, da es sich dabei um die Arithmetik des Diagramms handelt und nicht um die Daten des Elements selbst. Außerdem handelt es sich um schmale Spalten mit fester Breite, sodass ein paar Ziffern niemals den Anteil der Zeile einnehmen, den ein Name benötigt. Die Kanten behalten den gleichen Visibility-Steg und werden dann als Satz gelesen – Source / Label / Target.

Die Standardsortierung ist die Spalte Label, nicht die führende Spalte: Wenn Sie beim Öffnen nach Visibility sortieren, erfahren Sie nichts, während in jeder Zeile immer noch visible steht.

Standardmäßig wird alles angezeigt und das Raster scrollt seitwärts, anstatt etwas fallenzulassen. Verwenden Sie auf Knoten mit vielen Eigenschaften den Columns-Picker, um das auszuschalten, was Sie nicht benötigen – wodurch auch die Filtersteuerung aus dem Header entfernt wird.

Abgeleitete Spalten sind filterbar. Ihre Beschriftungen, Typen und Ausrichtung sind alle bereits abgeleitet, und der Zeilenfilter wird aus demselben Typ abgeleitet – eine Tabelle, die Sie nie konfiguriert haben, können Sie also immer noch eingrenzen. Deklarierte Spalten sind das Gegenteil: Sie erhalten genau den Satz, den Sie geschrieben haben, filterable: false, sofern Sie nichts anderes angeben.

Die eingebauten Spalten

tableColumns enthält die Spalten, die kein generisches Raster berechnen könnte, da es sich dabei um die Position eines Elements im Diagramm und nicht um seine Daten handelt:

import { Pivotick, tableColumns } from 'pivotick'

new Pivotick(el, data, {
    UI: {
        mode: 'full',
        table: {
            open: true,
            // Reference a built-in's key through the object rather than typing it —
            // the key itself is namespaced so it can never clash with a data key.
            sort: { key: tableColumns.degree.key, direction: 'desc' },
            columns: [
                tableColumns.visibility,
                { ...tableColumns.degree, label: 'Links' },
                tableColumns.label,
                { key: 'severity', label: 'Severity', type: 'numberRange', filterable: true },
            ],
        },
    },
})

label · degree · degreeIn · degreeOut · visibility · pinned · children · cluster, plus source und target für Kanten. Klonen Sie eines, um es wie oben anzupassen.

Eine TableColumn ist eine FilterFacet mit einigen Darstellungsextras (width, align, sortable, filterable, hidden, format), weshalb eine Facette unverändert als Spalte verwendet werden kann.

Exportieren

Die Schaltflächen CSV und JSON geben genau an, was Sie gerade sehen: diese Registerkarte, diese sichtbaren Spalten in dieser Reihenfolge, diese Sortierung, dieser Zeilenfilter. Rohwerte, niemals die format-Ausgabe einer Spalte, sodass die Datei maschinenlesbar bleibt.

Nicht das gesamte Diagramm – das ist für jeden mit Code graph.getNodes() entfernt. Übergeben Sie export: false, um die Tasten wegzulassen.

Downloads auf einer eingebetteten Seite

Ein Sandbox-Iframe kann einen Download komplett blockieren. Wenn das passiert, sagt das Dock dies, anstatt eine Schaltfläche zu belassen, die scheinbar nichts bewirkt.

Maßstab

Oberhalb von virtualizeAbove Zeilen (standardmäßig 200) sind die Zeilen gefenstert: Nur das, was in das Ansichtsfenster passt, plus einem Rand, befindet sich im DOM, während die Bildlaufleiste weiterhin den gesamten Datensatz misst. Beim Sortieren wird das zugrunde liegende Array neu angeordnet, niemals das DOM, und bei einer Neuerstellung bleiben sowohl Ihre Bildlaufposition als auch Ihre Auswahl erhalten.

Unterhalb des Schwellenwerts wird jede Zeile gerendert, wodurch der Normalfall einfach zu überprüfen ist.

Optionen

Option	Standardwert	Was es bewirkt
enabled	true	false (oder UI.table: false) entfernt das Dock vollständig
tabs	['nodes', 'edges']	Die eigenen Ansichten der Tabelle. Man rendert keinen Innenstreifen
columns / edgeColumns	abgeleitet	Siehe Spalten
open	nicht gesetzt	Unset beginnt an der Bar gefaltet; true beginnt erweitert; false hinterlässt überhaupt kein Dock (Shift+T bringt es immer noch herein)
collapsed	gefaltet	Zur Kopfleiste gefaltet. Mit open: true folgt 'auto' dem verfügbaren Raum, bis Sie selbst auswählen
height	0.35	Eine Pixelanzahl oder ein Bruchteil der Arbeitsfläche. Geklemmt, damit die Arbeitsfläche ein nutzbares Minimum behält
sort	die Spalte Label	{ key, direction }
rowActivate	'select'	'selectAndCenter' verschiebt auch die Arbeitsfläche; 'none' macht Zeilen inaktiv
filterGraph	true	Angebot Auf Diagramm anwenden. false für ein Dock, das die Arbeitsfläche niemals filtern kann
nested	true	Listen Sie den Inhalt eines Clusters als eigene Zeilen auf. Siehe Knoten innerhalb von Clustern
export	['csv', 'json']	false blendet die Schaltflächen aus
virtualizeAbove	200	Zeilenanzahl, ab der die Zeilen gefenstert werden

Das Dock fasst mehr als der Tisch

Die Tabelle ist ein Bereich im Dock, und alles andere, was Sie registrieren, ist ein anderes:

const dispose = graph.UIManager.addDockTab({
    label: 'Audit',
    render: () => myAuditPane(),        // called once, the first time the pane is opened
    toolbar: () => [clearButton],       // rebuilt on every activation
})

Auf der Leiste des Docks steht dann Table │ Audit. Beim Wechseln werden der Körper und die Header-Steuerelemente vertauscht, da Select all, die Exporte und Columns zur Tabelle gehören und gegenüber einem anderen Bereich keine Bedeutung haben. Ein Bereich rendert überhaupt keinen Streifen – bei einer Einstellung sollte nichts auf einen Schalter zeigen.

Die Tabelle ist kein Sonderfall: Sie kommt über dasselbe addDockTab, daher ist ein von Ihnen registrierter Bereich ihr gleich und nicht ihr Gast. order platziert es (gleiche Reihenfolgen behalten die Registrierungsreihenfolge bei, und ein später registrierter Bereich – wie es bei einem Plugin immer der Fall ist – landet nach dem integrierten Bereich). Der zurückgegebene Entsorger entfernt es.

Es gibt einen Bereich, also eine Höhe und eine Falte, egal wie viele Scheiben sich darin befinden. Zwei Scheiben können nicht jeweils einen in der Größe veränderbaren Streifen überstehen und sich über die Arbeitsfläche streiten.

Ein Bereich kann daher hinzugefügt werden, ohne dass er angezeigt wird: Er fügt sich in den Streifen ein, einschließlich der gefalteten Leiste, und wartet darauf, angeklickt zu werden. activateDockTab ist der separate Vorgang, einen nach vorne zu bringen, und das Einzige, was das Dock entfaltet.

Zwei Schalterebenen und warum sie unterschiedlich aussehen

Nodes und Edges sind die eigenen Tabs der Tabelle, nicht die des Docks. Da es sich um zwei Ansichten eines einzelnen Bereichs handelt, werden sie nicht neben Audit aufgeführt – das würde bedeuten, dass eine Ansicht der Tabelle und ein separater Bereich dasselbe sind.

Die beiden Ebenen sind unterschiedlich gezeichnet, sodass sie nebeneinander liegen und dennoch als äußere und innere Ebene gelesen werden können:

	Sieht aus wie	Klasse
Table │ Audit	Tabulatoren in voller Höhe, unterstrichen, wenn sie aktiv sind, und durch eine Regel geschlossen	pvt-dock-tabs / pvt-dock-tab
Nodes │ Edges	eine kleine segmentierte Pillengruppe	pvt-dock-views / pvt-dock-view

Ein Bereich mit seinen eigenen Ansichten macht das, was die Tabelle tut: Zeichnen Sie den Schalter in seinem toolbar und rufen Sie refresh() an seinem Handle auf, um den Körper zu ändern. Die inneren Klassen sind öffentlich, Ihr Switch ist also der integrierte und keine Neuformulierung davon:

function viewSwitch(current, pick) {
    const strip = document.createElement('div')
    strip.className = 'pvt-dock-views'
    for (const view of VIEWS) {
        const button = document.createElement('button')
        button.className = 'pvt-dock-view'
        button.textContent = view.label
        button.classList.toggle('active', view.key === current)
        button.addEventListener('click', () => pick(view.key))
        strip.appendChild(button)
    }
    return strip
}

graph.UIManager.addDockTab({
    label: 'Audit',
    toolbar: (pane) => [viewSwitch(current, (key) => { current = key; pane.refresh() })],
    render: () => renderCurrentView(),
})

Beide Ebenen erhalten ihren aktiven Akzent von --pvt-theme-primary, sodass ein Verbraucher, der das Thema neu einfärbt, das Dock damit neu einfärbt; Überschreiben Sie eine der beiden Klassen, um weiter zu gehen.

refresh() ist keine optionale Höflichkeit – das Dock behält das ihm übergebene Element render, sodass ein Bereich, der sein eigenes DOM ausgetauscht hat, das Dock verlassen und einen veralteten Knoten erneut anhängen würde, wenn er das nächste Mal in den Vordergrund gelangt.

Sehen Sie sich die Galeriekarte Dockbereich hinzufügen für eine Live-Galeriekarte und Plugins für die Plugin-Route an.

UI.dock – die eigenen Einstellungen der Region

open, collapsed und height beschreiben die Region, nicht die Tabelle, und UI.dock ist, wo sie hingehören:

// A dock holding only a plugin's pane, open on load
UI: { mode: 'full', table: false, dock: { open: true, height: 0.3 } }

UI.table trägt immer noch die gleichen drei Einstellungen und hatte es schon immer; Diese werden geehrt und UI.dock gewinnt, wenn beide gesetzt sind. Greifen Sie nach UI.dock, wenn der Tisch ausgeschaltet ist – das ist die einzige Tür zu einem Dock, die die Registerkarte eines Plugins mit sich bringt.

Programmgesteuerte Steuerung

graph.openTable()
graph.closeTable()
graph.toggleTable()

Jeder ist ein No-Op, wenn kein Dock vorhanden ist (jeder Modus außer full oder UI.table: false). openTable() bringt auch den Bereich der Tabelle in den Vordergrund, sodass ein Aufruf mit dem Namen für die Tabelle Ihnen einen anzeigt. Um die Region ohne das zu befahren:

graph.UIManager.dock?.setOpen(true)        // the region
graph.UIManager.activateDockTab('table')   // a pane, unfolding the dock if need be
graph.UIManager.getDockTabs()              // what is registered, in strip order

Das Dock steuert die normale Auswahl-API, sodass alles, was eine Auswahl liest, sieht, was die Tabelle erstellt hat:

graph.selectElements([nodeA, nodeB])   // replaces the selection
graph.addToSelection([nodeC])          // nodes only
graph.removeFromSelection([nodeA])

Größenänderung und Falten

Ziehen Sie die Trennlinie am oberen Rand des Docks entlang, um die Größe zu ändern. Die Arbeitsfläche behält den Boden bei, was auch immer Sie wünschen – eine Arbeitsfläche ohne Höhe ist kein Diagramm.

Der zusammenklappbare Chevron faltet das Dock bis zur Kopfleiste zusammen. Wenn Sie es alleine lassen, trifft collapsed: 'auto' diese Entscheidung für Sie und klappt das Dock auf ein Layout, das sowohl für es als auch für eine nutzbare Arbeitsfläche zu kurz ist; Wenn Sie es zum ersten Mal manuell ein- oder ausklappen oder den Teiler ziehen, hört die Entscheidung auf und überlässt die Entscheidung Ihnen.

Die gefaltete Leiste benennt weiterhin ihre Bereiche, und die Steuerelemente des aktiven Bereichs bleiben darin – die Zeilenanzahl der Tabelle, eine Pivot-Überprüfung, die angibt, dass sie abgerufen wird. Das ist es, was dafür sorgt, dass eine Scheibe ankommt, während das Dock zusammengeklappt ist, und bemerkt wird, ohne den Bildschirm zu nehmen, um es zu sagen. Wenn Sie dort auf einen Bereich klicken, wird das Dock geöffnet.

Eine Scheibe, die das Dock aufklappt, um sich zu zeigen, gibt den Bereich zurück, wenn sie entfernt wird, sodass eine Scheibe, die kommt und geht, ein geschlossenes Dock geschlossen lässt. Wenn Sie es falten, seine Größe ändern oder zu einem anderen Bereich wechseln, endet das: Jede Entscheidung ist Ihre eigene Entscheidung über die Region, und nichts kann sie in Ihrem Namen rückgängig machen.

Beim Öffnen des Docks wird das Diagramm nie verschoben

Die Simulation stimmt sich auf den Container ab, nicht auf die Arbeitsfläche, sodass das Öffnen und Schließen von Chrome ein Layout nicht ändern kann. Ändern Sie die Größe des Docks nach Belieben: Das Diagramm bleibt erhalten, und eine Neugestaltung führt bei geöffnetem oder geschlossenem Dock zum gleichen Ergebnis.