SVG-hjælpeprogrammer

SVGUtils er et sæt funktioner og klasser, der forenkler SVG-manipulationer for Power BI-visualiseringer.

Installation

Hvis du vil installere pakken, skal du køre følgende kommando i mappen med den aktuelle visualisering:

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

CssConstants

Modulet CssConstants indeholder den særlige funktion og grænseflade til at arbejde med klassevælgere.

Modulet powerbi.extensibility.utils.svg.CssConstants indeholder følgende funktion og grænseflade:

ClassAndSelector

I denne grænseflade beskrives almindelige egenskaber for klassevælgeren.

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

createClassAndSelector

Denne funktion opretter en forekomst af 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

manipulation

Metoden manipulation indeholder nogle særlige funktioner til generering af strenge, som du kan bruge sammen med SVG-transformationsegenskaben.

Modulet indeholder følgende funktioner:

oversætte

Denne funktion opretter en oversættelsesstreng til brug sammen med SVG-transformeringsegenskaben.

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 funktion opretter en translateX-streng til brug sammen med SVG-transformationsegenskaben.

function translateXWithPixels(x: number): string;

Eksempel:

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

manipulation.translateXWithPixels(100);

// returns: translateX(100px)

translateWithPixels

Denne funktion opretter en oversættelsesstreng til brug sammen med SVG-transformeringsegenskaben.

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 funktion opretter en translate-roter-streng til brug sammen med SVG-transformationsegenskaben.

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)

skæl

Denne funktion opretter en skaleringsstreng til brug i en CSS-transformeringsegenskab.

function scale(scale: number): string;

Eksempel:

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

manipulation.scale(50);

// returns: scale(50)

transformOrigin

Denne funktion opretter en transformationsoprindelsesstreng til brug i en CSS-transform-origin-egenskab.

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

Eksempel:

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

manipulation.transformOrigin(5, 5);

// returns: 5 5

flushAllD3Transitions

Denne funktion tvinger alle D3-overgange til at blive fuldført.

function flushAllD3Transitions(): void;

Eksempel:

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

manipulation.flushAllD3Transitions();

// forces every transition of D3 to complete

parseTranslateTransform

Denne funktion fortolker transformeringsstrengen med værdien "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 funktion opretter 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)"
}*/

Rektangulær

Modulet Rect indeholder nogle særlige funktioner til manipulation af rektangler.

Modulet indeholder følgende funktioner:

getOffset

Denne funktion returnerer en forskydning af 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 funktion returnerer rektanglets størrelse.

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 funktion ændrer rektanglets størrelse.

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 funktion returnerer en højre placering af 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

bund

Denne funktion returnerer en nederste placering af 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 funktion returnerer en placering øverst til venstre af rektanglet.

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 funktion returnerer en placering øverst til højre af rektanglet.

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 }

nederstLeft

Denne funktion returnerer en placering nederst til venstre af 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 funktion returnerer en placering nederst til højre af 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 funktion opretter en kopi af 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 funktion 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 funktion anvender en forskydning 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øje

Denne funktion føjer det første rektangel til det andet rektangel.

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 funktion returnerer det nærmeste punkt 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
}*/

er lig med

Denne funktion sammenligner rektangler og returnerer sand, hvis de er ens.

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 funktion sammenligner rektangler ved at overveje værdiernes præcision.

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 funktion 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 funktion kontrollerer, om et rektangel indeholder 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

erintersecting

Denne funktion kontrollerer, om rektangler skærer hinanden.

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

overlap

Denne funktion returnerer et skæringspunkt for 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 funktion 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 funktion 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