SVG-verktøy

SVGUtils er et sett med funksjoner og klasser for å forenkle SVG-manipulasjoner for Power BI-visualobjekter.

Installasjon

Hvis du vil installere pakken, bør du kjøre følgende kommando i katalogen med gjeldende visualobjekt:

npm install powerbi-visuals-utils-svgutils --save

CssConstants

Modulen CssConstants gir den spesielle funksjonen og grensesnittet til å arbeide med klassevelgere.

Modulen powerbi.extensibility.utils.svg.CssConstants gir følgende funksjon og grensesnitt:

ClassAndSelector

Dette grensesnittet beskriver vanlige egenskaper for klassevelgeren.

interface ClassAndSelector {
  class: string;
  selector: string;
}

createClassAndSelector

Denne funksjonen oppretter en forekomst av ClassAndSelector med navnet på klassen.

function createClassAndSelector(className: string): ClassAndSelector;

Eksempel:

import { CssConstants } from "powerbi-visuals-utils-svgutils";
import createClassAndSelector = CssConstants.createClassAndSelector;
import ClassAndSelector = CssConstants.ClassAndSelector;

let divSelector: ClassAndSelector = createClassAndSelector("sample-block");

divSelector.selector === ".sample-block"; // returns: true
divSelector.class === "sample-block"; // returns: true

Manipulasjon

Metoden manipulation inneholder noen spesielle funksjoner for å generere strenger som du kan bruke med egenskapen SVG-transformering.

Modulen inneholder følgende funksjoner:

oversette

Denne funksjonen oppretter en oversettelsesstreng for bruk med SVG-transformeringsegenskapen.

function translate(x: number, y: number): string;

Eksempel:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.translate(100, 100);

// returns: translate(100,100)

translateXWithPixels

Denne funksjonen oppretter en translateX-streng for bruk med SVG-transformeringsegenskapen.

function translateXWithPixels(x: number): string;

Eksempel:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.translateXWithPixels(100);

// returns: translateX(100px)

translateWithPixels

Denne funksjonen oppretter en oversettelsesstreng for bruk med SVG-transformeringsegenskapen.

function translateWithPixels(x: number, y: number): string;

Eksempel:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.translateWithPixels(100, 100);

// returns: translate(100px,100px)

translateAndRotate

Denne funksjonen oppretter en oversettelsesroteringsstreng for bruk med egenskapen SVG-transformering.

function translateAndRotate(
  x: number,
  y: number,
  px: number,
  py: number,
  angle: number
): string;

Eksempel:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.translateAndRotate(100, 100, 50, 50, 35);

// returns: translate(100,100) rotate(35,50,50)

skala

Denne funksjonen oppretter en skalastreng for bruk i en CSS-transformeringsegenskap.

function scale(scale: number): string;

Eksempel:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.scale(50);

// returns: scale(50)

transformOrigin

Denne funksjonen oppretter en transformeringsstreng for bruk i en CSS-transformeringsegenskap.

function transformOrigin(xOffset: string, yOffset: string): string;

Eksempel:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.transformOrigin(5, 5);

// returns: 5 5

flushAllD3Transitions

Denne funksjonen tvinger hver overgang av D3 til å fullføres.

function flushAllD3Transitions(): void;

Eksempel:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.flushAllD3Transitions();

// forces every transition of D3 to complete

parseTranslateTransform

Denne funksjonen analyserer transformeringsstrengen med verdien "translate(x,y)".

function parseTranslateTransform(input: string): { x: string; y: string };

Eksempel:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.parseTranslateTransform("translate(100px,100px)");

// returns: { "x":"100px", "y":"100px" }

createArrow

Denne funksjonen oppretter en pil.

function createArrow(
  width: number,
  height: number,
  rotate: number
): { path: string; transform: string };

Eksempel:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.createArrow(10, 20, 5);

/* returns: {
    "path": "M0 0L0 20L10 10 Z",
    "transform": "rotate(5 5 10)"
}*/

Rekt

Modulen Rect inneholder noen spesielle funksjoner for å manipulere rektangler.

Modulen inneholder følgende funksjoner:

getOffset

Denne funksjonen returnerer en forskyvning av rektanglet.

function getOffset(rect: IRect): IPoint;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.getOffset({ left: 25, top: 25, width: 100, height: 100 });

/* returns: {
    x: 25,
    y: 25
}*/

getSize

Denne funksjonen returnerer størrelsen på rektanglet.

function getSize(rect: IRect): ISize;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.getSize({ left: 25, top: 25, width: 100, height: 100 });

/* returns: {
    width: 100,
    height: 100
}*/

setSize

Denne funksjonen endrer størrelsen på rektanglet.

function setSize(rect: IRect, value: ISize): void;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

let rectangle = { left: 25, top: 25, width: 100, height: 100 };

Rect.setSize(rectangle, { width: 250, height: 250 });

// rectangle === { left: 25, top: 25, width: 250, height: 250 }

Denne funksjonen returnerer en høyre posisjon for rektanglet.

function right(rect: IRect): number;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.right({ left: 25, top: 25, width: 100, height: 100 });

// returns: 125

bunn

Denne funksjonen returnerer en bunnposisjon for rektanglet.

function bottom(rect: IRect): number;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.bottom({ left: 25, top: 25, width: 100, height: 100 });

// returns: 125

topLeft

Denne funksjonen returnerer en plassering øverst til venstre for rektangelet.

function topLeft(rect: IRect): IPoint;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.topLeft({ left: 25, top: 25, width: 100, height: 100 });

// returns: { x: 25, y: 25 }

topRight

Denne funksjonen returnerer en plassering øverst til høyre for rektangelet.

function topRight(rect: IRect): IPoint;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.topRight({ left: 25, top: 25, width: 100, height: 100 });

// returns: { x: 125, y: 25 }

bottomLeft

Denne funksjonen returnerer en plassering nederst til venstre i rektanglet.

function bottomLeft(rect: IRect): IPoint;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.bottomLeft({ left: 25, top: 25, width: 100, height: 100 });

// returns: { x: 25, y: 125 }

bottomRight

Denne funksjonen returnerer en plassering nederst til høyre for rektanglet.

function bottomRight(rect: IRect): IPoint;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.bottomRight({ left: 25, top: 25, width: 100, height: 100 });

// returns: { x: 125, y: 125 }

klon

Denne funksjonen oppretter en kopi av rektanglet.

function clone(rect: IRect): IRect;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.clone({ left: 25, top: 25, width: 100, height: 100 });

/* returns: {
    left: 25, top: 25, width: 100, height: 100}
*/

toString

Denne funksjonen konverterer rektanglet til en streng.

function toString(rect: IRect): string;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.toString({ left: 25, top: 25, width: 100, height: 100 });

// returns: {left:25, top:25, width:100, height:100}

offset

Denne funksjonen bruker en forskyvning på rektanglet.

function offset(rect: IRect, offsetX: number, offsetY: number): IRect;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.offset({ left: 25, top: 25, width: 100, height: 100 }, 50, 50);

/* returns: {
    left: 75,
    top: 75,
    width: 100,
    height: 100
}*/

tilføye

Denne funksjonen legger til det første rektanglet i det andre rektangelet.

function add(rect: IRect, rect2: IRect): IRect;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.add(
  { left: 25, top: 25, width: 100, height: 100 },
  { left: 50, top: 50, width: 75, height: 75 }
);

/* returns: {
    left: 75,
    top: 75,
    height: 175,
    width: 175
}*/

getClosestPoint

Denne funksjonen returnerer det nærmeste punktet på rektanglet til et bestemt punkt.

function getClosestPoint(rect: IRect, x: number, y: number): IPoint;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.getClosestPoint({ left: 0, top: 0, width: 100, height: 100 }, 50, 50);

/* returns: {
    x: 50,
    y: 50
}*/

lik

Denne funksjonen sammenligner rektangler og returnerer sann hvis de er like.

function equal(rect1: IRect, rect2: IRect): boolean;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.equal(
  { left: 0, top: 0, width: 100, height: 100 },
  { left: 50, top: 50, width: 100, height: 100 }
);

// returns: false

equalWithPrecision

Denne funksjonen sammenligner rektangler ved å vurdere presisjon av verdiene.

function equalWithPrecision(rect1: IRect, rect2: IRect): boolean;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.equalWithPrecision(
  { left: 0, top: 0, width: 100, height: 100 },
  { left: 50, top: 50, width: 100, height: 100 }
);

// returns: false

isEmpty

Denne funksjonen kontrollerer om et rektangel er tomt.

function isEmpty(rect: IRect): boolean;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.isEmpty({ left: 0, top: 0, width: 0, height: 0 });

// returns: true

containsPoint

Denne funksjonen kontrollerer om et rektangel inneholder et bestemt punkt.

function containsPoint(rect: IRect, point: IPoint): boolean;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.containsPoint(
  { left: 0, top: 0, width: 100, height: 100 },
  { x: 50, y: 50 }
);

// returns: true

isIntersecting

Denne funksjonen kontrollerer om rektangler krysser hverandre.

function isIntersecting(rect1: IRect, rect2: IRect): boolean;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.isIntersecting(
  { left: 0, top: 0, width: 100, height: 100 },
  { left: 0, top: 0, width: 50, height: 50 }
);

// returns: true

skjæringspunkt

Denne funksjonen returnerer et skjæringspunkt mellom rektangler.

function intersect(rect1: IRect, rect2: IRect): IRect;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.intersect(
  { left: 0, top: 0, width: 100, height: 100 },
  { left: 0, top: 0, width: 50, height: 50 }
);

/* returns: {
    left: 0,
    top: 0,
    width: 50,
    height: 50
}*/

kombinere

Denne funksjonen kombinerer rektangler.

function combine(rect1: IRect, rect2: IRect): IRect;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.combine(
  { left: 0, top: 0, width: 100, height: 100 },
  { left: 0, top: 0, width: 50, height: 120 }
);

/* returns: {
    left: 0,
    top: 0,
    width: 100,
    height: 120
}*/

getCentroid

Denne funksjonen returnerer et midtpunkt i rektanglet.

function getCentroid(rect: IRect): IPoint;

Eksempel:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.getCentroid({ left: 0, top: 0, width: 100, height: 100 });

/* returns: {
    x: 50,
    y: 50
}*/
  • Last updated on