Renderopties

Met Pivotick kunt u aanpassen hoe knooppunten, randen en labels worden weergegeven via de optie render.

waarschuwing

Alle hier gedefinieerde stijlen zijn alleen van toepassing als render.type is ingesteld op svg.

Optie	Typ	Standaard	Beschrijving
type	'svg' | 'canvas'	'svg'	De weergavemethode. 'svg' gebruikt SVG elementen, 'canvas' gebruikt het HTML canvas (experimenteel - niet volledig geïmplementeerd).
renderNode	(node: Node) => HTMLElement | string | void	undefined	Aangepaste renderer voor knooppunten.
renderLabel	(edge: Edge) => HTMLElement | string | void	undefined	Aangepaste renderer voor randlabels.
defaultNodeStyle	NodeStyle	defaultNodeStyle	Standaardstijl toegepast op alle knooppunten.
defaultEdgeStyle	EdgeStyle	defaultEdgeStyle	Standaardstijl toegepast op alle randen.
defaultLabelStyle	LabelStyle	defaultLabelStyle	Standaardstijl toegepast op alle randlabels.
markerStyleMap	Record<string, MarkerStyle>	defaultMarkerStyle	Aangepaste stijlen voor randmarkeringen ('arrow', 'diamond', enz.). Zie MarkerStyle
nodeTypeAccessor	(node: Node) => string | undefined	undefined	Functie om toegang te krijgen tot het type knooppunt, gebruikt met nodeStyleMap.
nodeStyleMap	Record<string, NodeStyle>	{}	Wijst knooppunttypen (van nodeTypeAccessor) toe aan stijlen.
edgeTypeAccessor	(edge: Edge) => string | undefined	undefined	De soort van een rand, gebruikt met edgeStyleMap en als een laag sleutel.
edgeStyleMap	Record<string, Partial<EdgeStyle>>	undefined	Wijst randsoorten (van edgeTypeAccessor) toe aan stijlen. Zie Randlagen.
minZoom	number	0.1	Minimaal zoomniveau.
maxZoom	number	10	Maximaal zoomniveau.
minFitScale	number	undefined	De laagste zoomlens waar een pasvorm naar toe gaat. Bij deze zoom wordt een grafiek geopend die te groot is om erin te passen, gecentreerd op fitAnchor, en de minikaart toont de rest.
fitAnchor	string	undefined	Id van het knooppunt waarop een fit op minFitScale is gecentreerd. De weergave stopt bij de randen van de grafiek, dus een anker aan de ene kant blijft dichtbij die kant.
zoomEnabled	boolean	true	Schakel zoom in. false neemt ook de zoomknoppen van de viewportrail over, zodat deze in het midden blijft.
selectionBox	SelectionBox	undefined	Regioselectie: enabled: false laat het selectiekader voor slepen en het gereedschap Selecteren ▸ Lasso vallen.
enableNodeExpansion	boolean	true	Een cluster uitbreiden: false neemt de punthaak, de snelkoppeling Enter en de samengevouwen stippellijn mee. Een geselecteerd kind steekt nog steeds zijn gesloten cluster aan.

Type weergave

fooi

Pivotick geeft u flexibele controle over de weergave, van eenvoudige standaardinstellingen tot volledig aangepaste weergave. Hier is een kort overzicht:

• Met renderNode en renderLabel kunt u volledig aanpassen hoe knooppunten en labels worden getekend (u kunt HTML of tekst retourneren).
• defaultNodeStyle.html (per knooppunt of per type) is hetzelfde ontsnappingsluik binnen de stijlketen — zie HTML knooppunten.
• nodeTypeAccessor + nodeStyleMap maken dynamische styling mogelijk op basis van het type van elk element.
• defaultNodeStyle, defaultEdgeStyle en defaultLabelStyle definiëren het basisuiterlijk voor alle elementen.
• edgeTypeAccessor + edgeStyleMap zijn de tegenhangers aan de rand, en ze fungeren ook als de sleutel waarmee een relatielaag wordt uitgeschakeld — zie Randlagen.

Uw kaart wordt gemeten, welke vorm deze ook heeft

Pivotick meet wat je teruggeeft om zijn <foreignObject> te vergroten en de kracht te voeden botsingsradius van de lay-out. De kaart wordt gemeten in een krimpbare doos van de bibliotheek is eigen, dus je hoeft niet je root zelfaanpassend te maken: width: 100% erop wordt opgelost tegen de eigen inhoud in plaats van tegen de tijdelijke aanduiding.

De volgende drie weergavevoorbeelden gebruiken de volgende gegevens:

const data = {
    nodes: [
        { id: 1, data: { label: 'A', type: 'hub' } },
        { id: 2, data: { label: 'B', type: 'spoke' } }
    ],
    edges: [{ from: 1, to: 2 }]
}

Standaard weergave

const options = {
    render: {
        defaultNodeStyle: {
            shape: 'circle',
            color: '#007acc',
            size: 12,
            strokeColor: '#fff',
            strokeWidth: 2,
            fontFamily: 'system-ui',
            textColor: '#fff'
        },
        defaultEdgeStyle: {
            markerStart: (edge: Edge) => edge.getData().mstart,
            markerEnd: 'arrow',
            curveStyle: 'straight',
        },
    }
}

Kaart-Accessor-weergave

const options = {
    render: {
        nodeTypeAccessor: (node) => node.getData()?.type,
        nodeStyleMap: {
            'hub': {
                shape: 'hexagon',
                color: '#f90',
                size: 25,
                text: (node) => node.getData()?.label
            },
            'spoke': {
                shape: 'triangle',
                color: '#09f'
            }
        },
    },
    UI: {
        mode: 'static'
    }
}

Aangepaste terugbelweergave

const options = {
    render: {
        renderNode: (node: Node): HTMLElement | string | void => {
            const size = 12
            const color = '#09f'
            const style = [
                'display: block',
                `width: ${size}px`,
                `height: ${size}px`,
                `background-color: ${color}`,
                'border: 2px solid #fff',
                'border-radius: 50%',
                'opacity: 1',
            ].join(';')

            return `<span style="${style}"></span>`
        }
    }
}

Voorbeeld voor weergave van Map-Accessor

HTML knooppunten

Als geen combinatie van shape, color, icon en text voldoende is, geef dan de renderer wat opmaak. Er zijn twee manieren om binnen te komen, en het verschil is slechts waar ze worden gedeclareerd:

	Aangegeven op	Bereikt
NodeStyle.html	defaultNodeStyle, nodeStyleMap[type], de eigen stijl van een knooppunt, een styleCb return	één type of één knooppunt
render.renderNode	de rendereropties	elk knooppunt, vóór de stylingketen

html is degene die je als eerste moet bereiken: het is een kanaal in gewone stijl, dus het wordt opgelost via dezelfde prioriteitsketen als color of shape, en er kan een kaart aan één worden gegeven soort knooppunt, terwijl de rest hun vorm behoudt.

const options = {
    render: {
        nodeTypeAccessor: (node) => node.getData()?.kind,
        nodeStyleMap: {
            // A card, and nothing else: `shape: 'none'` is what makes it the whole node.
            service: {
                shape: 'none',
                html: (node) => {
                    const card = document.createElement('div')
                    card.className = 'my-service-card'
                    card.textContent = node.getData()?.name
                    return card
                },
            },
            // Same graph, ordinary shapes.
            host: { shape: 'circle', size: 18, color: '#0891b2' },
        },
    },
}

shape: 'none'

Zonder dit is de vorm nog steeds achter je kaart getekend, en is size de kleinste van de knooppunt mag zijn - wat je wilt voor een kaart die op een gekleurde schijf zit, en niet wat je wilt voor een kaart die het knooppunt is. shape: 'none' tekent geen vorm en handen de botsingsradius en rand van het knooppunt worden in plaats daarvan aan de kaart verankerd.

Het is een vormwaarde zoals elke andere, dus het wordt samengesteld: een knooppunt met alleen labels is shape: 'none' met een text en geen kaart, en een knooppunt met alleen pictogrammen is shape: 'none' met een iconClass. Een vormeloze knoop zonder enige inhoud is onzichtbaar – maar er nog steeds, nog steeds versleepbaar en nog steeds selecteerbaar via 2 × size.

Wat een kaart niet uitschakelt

text is een apart kanaal, dus een kaart en een knooppuntlabel worden samen getekend. Als uw kaart heeft zijn eigen titel, set text: '' — een geërfde waarde kan niet worden gewist undefined, wat doorgaat met wat de stijlkaart zei.

Maatvoering

Je kaart wordt gemeten en het knooppunt groeit ernaartoe, zodat deze nooit wordt afgekapt, de botsing forceer de echte kaarten, en de randen komen op de rand van de kaart terecht in plaats van op een cirkel eromheen. U hoeft niets te doen om dat te laten werken — retourneert een width: 100% root is prima, omdat de meting plaatsvindt in een krimpdoos.

Twee gevolgen die de moeite waard zijn om te weten:

• De meting is asynchroon (een kaart kan niet worden gemeten voordat deze op het scherm staat), dus de straal van een knooppunt heeft de stijl size voor de eerste of twee frames en wordt dan de kaart. De lay-out wordt één keer geduwd wanneer deze landt.
• Een kaart wordt één keer gemeten , bij render. Als de inhoud later vanzelf van grootte verandert, render het knooppunt opnieuw om het opnieuw te meten.

Slechts enkele knooppunten worden gekaard

Beide callbacks kunnen nothing retourneren voor een knooppunt, dat dat knooppunt teruggeeft aan de stylingketen - vorm, stijlkaartinvoer, pictogrammen en label zoals gewoonlijk. Eén mondiaal dus renderNode kan de knooppunten die er één verdienen, in kaart brengen:

renderNode: (node) => node.getData()?.featured ? buildCard(node) : undefined

Alleen vertrouwde markeringen

Wat u ook retourneert, wordt ingevoegd zoals het is. Bouw het met textContent, of ontsnap eraan — doe dat niet knooppuntgegevens interpoleren in een opmaaktekenreeks. Zie de beveiligingsgids.

Volledige knooppuntlabels

Een knooppuntlabel dat langer is dan de ruimte die het heeft, wordt ingekort met een middelste ellips (Supe…abel). Stel textTruncate: false in om het in plaats daarvan volledig te tekenen — standaard, per knooppunttype, of per knooppunt:

const options = {
    render: {
        defaultNodeStyle: { textTruncate: false },
    },
}

Tussen de twee sluit textMaxWidth het label af met een door u gekozen breedte, in grafische eenheden (CSS pixels bij zoom 1), in plaats van de ruimte die het knooppunt eraan geeft. Er wordt een passend label getekend volledig, en een langere wordt ingekort met een middelste ellips tot die breedte:

const options = {
    render: {
        defaultNodeStyle: { textTruncate: true, textMaxWidth: 160 },
    },
}

Lettergrootte van label

Een knooppuntlabel wordt standaard getekend op max(12, size × 0.45), zodat het meegroeit met het knooppunt. Wanneer een knooppunt groot is vanwege wat het tekent in plaats van hoeveel het ertoe doet, zoals een afbeelding thumbnail, stel textFontSize (grafiekeenheden) in om het label in lijn te houden met zijn buren:

const options = {
    render: {
        nodeStyleMap: {
            image: { size: 80, imagePath: (node) => node.getData()?.url, textFontSize: 12 },
        },
    },
}

Het label zit nog steeds net buiten het knooppunt, het ingebouwde budget neemt nog steeds zijn breedte over het knooppunt (zodat een kleiner lettertype meer tekens bevat), en de zoompoort beoordeelt het op basis van de grootte die u instelt.

De dop schaalt mee met de zoom, net als de rest van het knooppunt, en kan een functie zijn van de knooppunt. Het wordt genegeerd als textTruncate false is.

Een volledig of afgedekt label loopt meestal voorbij de vorm van het knooppunt, dus wordt het daarop getekend themapil als zwevend label om leesbaar te blijven over het canvas. Koppel het met textVerticalShift: 1 (of textHorizontalShift) om het hele label leeg te maken van het knooppunt. Randlabels worden nooit afgekapt.

text is een label op een knooppunt en geen vervanging ervan. Een knooppunt waarvan is de tekst ervan zou moeten zijn getekend als knooppunt, via html, renderNode of een tier — dit zijn de tekeningen van het knooppunt, en de zoom houdt ze hoe dan ook minLabelFontSize doet met labels.

Knooppunt-badges

Tegen de tijd dat een grafiek bruikbaar is, zijn color, shape, size en iconClass gewoonlijk allemaal iets dragend. badges is een eigen kanaal: er zijn kleine indicatoren vastgezet naar de rand van het knooppunt, waarbij geen van de andere wordt uitgegeven:

const options = {
    render: {
        defaultNodeStyle: {
            badges: (node) => {
                const { notes, disputed } = node.getData()
                return [
                    notes && { text: String(notes), color: '#2563eb', title: `${notes} notes` },
                    disputed && { iconClass: 'fa fa-exclamation', color: '#b94a48', title: 'Disputed' },
                ].filter(Boolean)
            },
        },
    },
}

Geef een badge text (een telling, of een teken of twee), een iconClass, iconUnicode of svgIcon, en een title voor de eigen tooltip. text wint als Je levert beide. Bij een langere tekst wordt de badge een pil, en tot drie uur tekens die het 99+ weergeeft.

Waar ze heen gaan

Laat position weg en badges vullen de vrije hoeken met de klok mee vanaf 'ne'. Noem er één ('ne' | 'nw' | 'se' | 'sw') en het wordt woordelijk gehonoreerd, inclusief overlappingen.

Vier passen op een gewoon knooppunt, twee op één met kinderen. Het uitvouwen/inklappen De controle bevindt zich in het noordoosten als een knooppunt is ingestort en in het zuidoosten als dat het geval is uitgebreid, dus op elk uitbreidbaar knooppunt beide Oostelijke hoeken zijn gereserveerd — anders elke badge veranderde van hoek zodra een cluster werd geopend. Badges die verder gaan dan wat past in een +n waarvan de tooltip deze een naam geeft.

Badges schalen mee met het knooppunt tussen een vloer en een plafond, zodat ze leesbaar blijven een klein knooppunt zonder zwelling op een groot knooppunt, en ze zitten op de echte vorm rand — de hoek van een vierkant of een ingelijste afbeelding, het 45°-punt van een cirkel.

Klikken

Een badge kan worden getest op hits, maar is standaard transparant: zonder handler klikt hij valt er doorheen en selecteert het knooppunt eronder, zodat een badge nooit een dode plek is.

{ text: '3', onClick: (event, node, badge) => openNotes(node) }

Geef een badge een onClick — of geef callbacks.onBadgeClick aan voor gedrag allemaal delen - en het neemt de aanwijzercursor en verbruikt zijn klik, waardoor het knooppunt niet geselecteerd. Beiden vuren, eerst de badge zelf. Het indrukken van een badge sleept nog steeds het knooppunt hoe dan ook, en een badgeClick luisteraar op de interactiebus kan dat wel cancel() beide.

Reikwijdte

Badges beschrijven alleen het knooppunt waarop ze zich bevinden. Een ingestort cluster doet dat niet verzamel de kinderen van zijn kinderen — loop node.children in uw eigen badges functie als dat is wat je wilt, omdat alleen jij weet of een feit optelt, wint, of geen van beide.

Detail dat volgt op de zoom

Een tekening die van dichtbij goed leest, is op een overzicht onleesbaar, en een stip die in een past overzicht kan niet zeggen wat het is. Met tiers kan één knooppunt meerdere tekeningen en keuzes bevatten tussen hen, afhankelijk van hoe groot het knooppunt momenteel wordt weergegeven.

const options = {
    render: {
        defaultNodeStyle: {
            tiers: [
                // Small: a coloured dot.
                { width: 32, height: 32, style: { shape: 'circle', size: 16 } },
                // Once there is room for it: a labelled chip.
                { width: 140, height: 44, style: { shape: 'none', html: buildChip } },
            ],
        },
    },
}

Niveaus worden eerst als kleinste gerangschikt en de rijkste die past, wint. Wanneer niemand dat doet, wordt de node tekent op zijn basisstijl, dus de stijl die je al hebt is de vloer: een grafiek die verklaart dat geen tiers in elk opzicht onaangetast blijft.

Wat een niveau erft

Een niveau wordt samengevoegd met de basisstijl, dus een kanaal dat er geen naam aan geeft, wordt overgenomen. De tekening is de uitzondering: iconUnicode, iconClass, svgIcon, imagePath en html zijn één slot, dus een niveau dat een van hen een naam geeft, vervangt regelrecht de tekening van de basis (en zijn imageFit). Een symbool in rust met een kaartniveau heeft niets meer nodig dan de kaart:

const options = {
    render: {
        defaultNodeStyle: {
            svgIcon: buildGlyph,
            tiers: [
                { width: 140, height: 44, style: { shape: 'none', html: buildChip } },
            ],
        },
    },
}

Een niveau dat geen tekening noemt, bijvoorbeeld alleen size, color of text, behoudt de glyph van de basis.

Om een kanaal weg te halen dat door het niveau anders niet wordt vervangen, stelt u het in op null, wat betekent het niveau trekt die ene helemaal niet. strokeColor: null laat de omtrek van de basis vallen, voor voorbeeld. undefined kan niet invallen: het betekent "Ik geef dit kanaal geen naam", dat wil zeggen precies hoe de waarde van de basis overleeft.

Dit is de enige laag waar null op die manier werkt. Overal elders in de stijlketen null valt nog steeds door naar de onderliggende laag, omdat een styleCb meteen een nul teruggeeft van knooppuntgegevens is een gewone vorm en heeft altijd "gebruik de standaard" betekend.

Om een knooppunt vormloos te maken, gebruikt u shape: 'none' in plaats van shape te wissen.

Wat een niveau kiest

De weergegeven grootte: de voetafdruk van het knooppunt in CSS pixels, wat footprint × zoom is. EEN niveau wordt ingeschakeld zodra het zijn minRenderedSize bereikt, wat standaard hetzelfde is als dat van het niveau width, dus { width: 140 } luidt als "engagement zodra er ruimte is om 140 pixels aan knooppunt".

De zoomvergroting op zichzelf zou niet volstaan. Het vermenigvuldigt de coördinaten van de uitgevonden lay-out, dus dezelfde schaal betekent een andere schijnbare grootte op een andere grafiek, en een afgestemde drempel op de ene dataset zou verkeerd zijn op de volgende.

Een niveau dat is ingeschakeld, blijft geldig totdat de weergegeven grootte 85% van de drempelwaarde heeft bereikt. Elke knooppunt deelt een drempel, dus zonder die band zou een canvas dat erop geparkeerd staat flikkeren als een heel.

De voetafdruk blijft staan

Het vak dat een knooppunt in de lay-out reserveert, verandert niet wanneer de tekening dat doet. Het is layoutSize, en het is standaard ingesteld op de helft van het breedste aangegeven niveau, dus het declareren van niveaus geeft de grafiek de juiste afstand zonder een tweede getal. Er beweegt niets wanneer een niveau wisselt: de tekening verandert in een doos die al de juiste maat had, en de krachten zien het nooit verschil.

width en height worden om dezelfde reden gedeclareerd in plaats van gemeten. De indeling heeft om de voetafdruk vóór de eerste tik te kennen, en een gemeten kaart rapporteert de grootte ervan slechts één keer het is getekend.

Stel zelf layoutSize in om de grafiek strakker of breder te plaatsen dan het breedste niveau. Let op dat een laag alleen op de ontwerpgrootte wordt getekend als de breedte gelijk is aan de voetafdruk; een smaller grijpt men proportioneel eerder aan en wordt proportioneel kleiner getekend. Geef het een expliciet minRenderedSize als dat ertoe doet.

De focustekening

focusTier is de tekening die een knooppunt gebruikt terwijl het zweeft of afzonderlijk wordt geselecteerd, ongeacht de zoom. Dit is waar een knooppunt alles over zichzelf zegt, dus er wordt er nooit een gelezen betekent dat je erop inzoomt.

const options = {
    render: {
        defaultNodeStyle: {
            tiers: [/* … */],
            focusTier: { shape: 'none', html: buildDetailCard },
        },
    },
}

Het voegt zich samen over de base-stijl van het knooppunt in plaats van over de actieve laag, dus de shape of html kunnen er niet in lekken. Het heeft een constante grootte op het scherm: de tekening is tegengesteld aan de zoom, dus een kaart van 280×150 is 280×150 CSS pixels, hoe ver weg de grafiek is. En het raakt nooit de geometrie van het knooppunt, zodat de randen op de laag blijven landen eronder en zweven beweegt niets.

De focustekening draagt de badges van het knooppunt op zijn eigen rand, terwijl schermgrootte als de kaart. De eigen badges van het knooppunt zijn verborgen terwijl deze zichtbaar zijn, zodat er geen wordt getekend tweemaal. Geef focusTier een eigen badges om een ​​andere set op de kaart weer te geven.

Alleen een knooppunt dat op zichzelf **** is geselecteerd, wordt gepromoveerd. Een selectie van een vak met vijftig knooppunten zou een muur zijn van overlappende kaarten.

render.focusTierTrigger zegt wanneer het vuurt: 'both' (de standaard), 'hover', 'selection' of 'off'. Reik naar 'off' wanneer u een stijlvoorinstelling van iemand insluit anders wordt verzonden en wil dat de focustekening wordt onderdrukt zonder deze te bewerken.

Wanneer een niveau dit al laat zien

Soms is de focustekening hetzelfde als een van de zoomniveaus: een glyph in rust zweeft in een chip, waarbij de chip ook wordt getekend zodra de grafiek ver genoeg is ingezoomd. Daar, zweven zou een tweede, kleinere chip over de chip schilderen die al op het scherm staat. focusTierYieldsAt noemt de index in tiers van waaruit de focustekening stopt met schieten:

defaultNodeStyle: {
    tiers: [{ width: 140, height: 44, style: { shape: 'none', html: chipFor } }],
    focusTier: { shape: 'none', html: chipFor },
    focusTierYieldsAt: 0,
}

Terwijl het knooppunt op dat niveau of op een rijker niveau wordt getekend, beweegt u de muisaanwijzer en laat een enkele selectie het staan het is. Het volgt de actieve laag, niet het zoomniveau, dus gebruikt het dezelfde drempels als de ruilen. Als u inzoomt terwijl de kaart open is, wordt deze vervaagd naarmate het niveau vervaagt, en als u weer uitzoomt brengt het terug zonder de aanwijzer te verplaatsen. Laat het uitgeschakeld op een knooppunt waarvan de focustekening aangeeft meer dan welk niveau dan ook, en een knooppunt zonder tiers negeert dit.

Tooltips worden nog steeds weergegeven

Een focuskaart vervangt de tooltip niet. De twee zijn onafhankelijk, en een tooltip kan dat ook zijn iets dragen wat de kaart niet heeft.

De ruil zelf

Een knooppunt vervaagt van de ene tekening naar de volgende in plaats van er naartoe te knippen. De uitgaande de tekening wordt op een eigen laag gehouden en de twee vervagen langs elkaar, dus er is nooit een knooppunt afwezig mid-swap, slechts kort zachter waar ze elkaar overlappen.

render.detailTransition is hoe lang dat duurt, in milliseconden. Standaard is dit 160 en omvat elke tekening die door de zoom wordt bepaald: een niveauovergang, de focustekening en een label kruising minLabelFontSize. Stel deze in op 0 om de tekening in één te vervangen kader:

const options = {
    render: {
        detailTransition: 0,
        defaultNodeStyle: { tiers: [/* … */] },
    },
}

Elk knooppunt op het scherm kruist op hetzelfde moment, dus een kruising begint net zoveel fades als er zijn knooppunten die veranderen. Gemeten op 210 knooppunten die elk een kaart van 140×44 bevatten, loopt de fade op 60 fps over de gehele lengte; wat het kost is ongeveer 26 ms op het enkele frame van de kruising al besteedt, en dat cijfer groeit niet met de duur. Schakel het uit in een grafiek waar dat frame belangrijker is dan de transitie.

prefers-reduced-motion schakelt het vanzelf uit, wat de optie ook zegt.

Etiketten op een leesbaar formaat

Een label volgt de grafiek en schaalt mee, dus hoe verder de weergave zich bevindt, hoe kleiner deze is geschilderd. Er wordt een grafiek geopend op elke schaal die de pasvorm kiest, en die schaal valt zoals de grafiek groeit: voorbij een paar honderd knooppunten is het openingsframe een tekst die niemand kan lezen, getekend over de grafiek die het noemt.

render.minLabelFontSize is de weergegeven grootte, in CSS pixels, waaronder geen label wordt weergegeven getekend. Standaard is dit 9.

const options = {
    render: {
        minLabelFontSize: 9,
    },
}

De test is fontSize × zoom, in gerenderde pixels in plaats van de zoomschaal: een schaal vermenigvuldigt coördineert de uitgevonden lay-out, dus dezelfde waarde betekent een andere schijnbare grootte op de volgende dataset.

Het is één getal voor het hele canvas, zowel voor de randlabels als voor de knooppuntlabels. Het verschil daartussen staat al de lettergrootte: er wordt een randlabel bij getekend defaultLabelStyle.fontSize (standaard 12), terwijl die van een knooppunt is afgeleid van het knooppunt, max(12, size × 0.45), dus een groot knooppunt behoudt zijn label op een lagere zoom dan een klein knooppunt. De textFontSize van een knooppuntstijl vervangt die afgeleide grootte.

0 zet het hek uit en tekent elk label bij elke zoom.

Wat telt als een label

De tekst die de bibliotheek plaatst: de label van een rand, de text van een knooppunt, en wat dan ook render.renderLabel retourneert. De html, renderNode of niveaukaart van een knooppunt is de tekening, en tiers is wat kiest tussen tekeningen.

Een label dat wordt weergegeven, blijft geldig totdat de weergegeven grootte daalt tot 85% van de drempelwaarde, dus a het beeld dat op de lijn geparkeerd staat, blijft hangen in plaats van flikkert. Elk label getekend in één maat geeft antwoord samen, tot welk element het ook behoort.

Een rand die op zichzelf **** is geselecteerd, toont zijn label, ongeacht de zoomlens, tegengesteld geschaald zodat het zo is leesbaar in plaats van de twee pixels waar het verborgen was. Een rand heeft dus geen tooltip en geen paneel het label is het enige dat antwoordt "wat is dit". Een knooppunt heeft dat allemaal niet nodig: it beantwoordt al via de tooltip, de zijbalk en de focusTier-tekening.

Een verborgen label is niet alleen onzichtbaar, het staat ook niet in de grafiek – daar gaan de kosten naartoe. Op elk simulatievinkje wordt een label opnieuw gepositioneerd, en op een grote grafiek waarin alleen de kosten worden weergegeven meer dan een kader. Wat overblijft na de poort is de slag, die goedkoop is.

Wat het niet doet

Boven de drempel kunnen labels elkaar nog steeds overlappen. Een randlabel is doorgaans breder dan de rand die het noemt, en die verhouding verandert niet met de zoomlens. Deze optie gaat over leesbaarheid, niet ontwarrend.

API

Pivotick toont een renderercontroller waarmee u rechtstreeks met de rendering-engine kunt communiceren. Alle methoden zijn online beschikbaar

Pasvorm en zoom

Fit and center

graph.renderer.fitAndCenter()

Zomm in / out

graph.renderer.zoomIn()
graph.renderer.zoomOut()