마스크를 사용하여 중첩 사각형의 애니메이션 차트를 만드는 방법

우리는 잘 알려진 차트 유형이 많이 있습니다 : 바, 도넛, 라인, 파이, 이름을 지정합니다. 모든 인기있는 차트 라이브러리가이를 지원합니다. 그런 다음 이름이없는 차트 유형이 있습니다. 상대 크기를 시각화하는 데 도움이되는 쌓인 (중첩) 사각형이있는이 Dreamt-Up 차트를 확인하십시오.

우리가 만드는 것

상호 작용이 없으면이 디자인을 만드는 것은 매우 간단합니다. 이를 수행하는 한 가지 방법은 왼쪽 하단 모서리가 모두 같은 지점에 닿는 크기가 감소하는 요소 (예 : SVG 요소 또는 HTML DIV)를 쌓는 것입니다.

그러나 상호 작용을 소개하면 상황이 까다로워집니다. 그 방법은 다음과 같습니다. 마우스를 모양 중 하나 위로 움직일 때 다른 사람들이 사라지고 멀어지기를 원합니다.

우리는 사각형과 마스크를 사용하여 이러한 불규칙한 모양을 만들어냅니다 - 및 요소와 함께 리터럴

이제 시작하기 전에 SVG에 대한 더 나은 대안이 사용자 정의 모양을 사용하는지 궁금 할 것입니다. 그것은 확실히 가능성입니다! 그러나 로 모양을 그리는 것은 위협적이거나 지저분해질 수 있습니다. 따라서 우리는 동일한 모양과 효과를 얻기 위해 "더 쉬운"요소로 작업하고 있습니다.

예를 들어, 를 사용하여 가장 큰 파란색 모양을 나타내는 방법은 다음과 같습니다.

 <svg viewbox="0 320 320">
  <path d="M320 0H0V56H264V320H320V0Z" fill="#264653"></path>
</svg>

0H0V56이 당신에게 의미가없는 경우, 구문에 대한 철저한 설명을 보려면“SVG Path Syntax : 그림 가이드”를 확인하십시오.

차트의 기본 사항

다음과 같은 데이터 세트가 주어졌습니다.

 type dataSetentry = {
  레이블 : 문자열;
  가치 : 숫자;
};

type dataset = dataSetentry [];

const rawdataset : dataset = [
  {레이블 : 'bad', value : 1231},
  {레이블 : '시작', 값 : 6321},
  {레이블 : '개발', 가치 : 10028},
  {레이블 : '달성', 가치 : 12123},
  {레이블 : '예시', 가치 : 2120}
];

… 우리는 다음과 같은 SVG로 끝나고 싶습니다.

 <svg viewbox="0 320 320">
  <rect width="320" height="320" y="0" fill="..."> </rect>
  <rect width="264" height="264" y="56" fill="..."> </rect>
  <rect width="167" height="167" y="153" fill="..."> </rect>
  <rect width="56" height="56" y="264" fill="..."> </rect>
  <rect width="32" height="32" y="288" fill="..."> </rect>
</svg>

가장 높은 값을 결정합니다

우리가 가장 높은 가치가 필요한 이유는 분명해질 것입니다. 우리는 math.max ()를 사용하여 얻을 수 있습니다. 그것은 여러 인수를 받아들이고 세트에서 가장 높은 값을 반환합니다.

 const dataSethestValue : number = math.max (
  ... RawDataset.map ((Entry : DataSetentry) => Entry.Value)
);

우리는 작은 데이터 세트가 있기 때문에 12123을 얻을 것이라고 말할 수 있습니다.

직사각형의 치수를 계산합니다

디자인을 보면 가장 높은 값 (12123)을 나타내는 사각형은 차트의 전체 영역을 포함합니다.

우리는 SVG 치수에 대해 임의로 320을 선택했습니다. 사각형은 제곱이므로 너비와 높이는 동일합니다. 12123을 320과 동일하게 만드는 방법은 무엇입니까? 덜 "특별한"값은 어떻습니까? 6321 사각형은 얼마나 큽니까?

다른 방법으로, 우리는 한 범위 ([0, 12123])에서 다른 범위 ([0, 320])에 숫자를 어떻게 매핑합니까? 또는 더 많은 수학 용어로 변수를 [a, b]의 간격으로 어떻게 확장합니까?

우리의 목적을 위해, 우리는 다음과 같은 기능을 구현할 것입니다.

 const remapvalue = (
  가치 : 숫자,
  Frommin : 숫자,
  Frommax : 숫자,
  Tomin : 숫자,
  Tomax : 숫자
) : 번호 => {
  return ((value -frommin) / (Frommax -Frommin)) * (Tomax -Tomin) Tomin;
};

REMAPVALUE (1231, 0, 12123, 0, 320); // 32
REMAPVALUE (6321, 0, 12123, 0, 320); // 167
REMAPVALUE (12123, 0, 12123, 0, 320); // 320

코드의 동일한 범위에 값을 매핑하므로 최소 및 최대 값을 반복해서 전달하는 대신 래퍼 기능을 만들 수 있습니다.

 const valueremapper = (
  Frommin : 숫자,
  Frommax : 숫자,
  Tomin : 숫자,
  Tomax : 숫자
) => {
  return (값 : 번호) : 숫자 => {
    리턴 remapvalue (Min, Frommax, Tomin, Tomax);
  };
};

const remapdatasetvaluetosvgdimension = valueremapper (
  0,
  DataSethestValue,
  0,
  svgdimension
);

우리는 다음과 같이 사용할 수 있습니다.

 remapdatasetvaluetosvgdimension (1231); // 32
remapdatasetvaluetosvgdimension (6321); // 167
remapdatasetvaluetosvgdimension (12123); // 320

DOM 요소를 작성하고 삽입합니다

남아있는 것은 DOM 조작과 관련이 있습니다. 우리는

더 일반적인 CreateElement 대신 CreateElementns를 사용하고 있습니다. 우리는 SVG와 협력하고 있기 때문입니다. HTML 및 SVG 요소는 사양이 다르므로 다른 네임 스페이스 URI에 속합니다. CreateElement가 HTML 네임 스페이스를 편리하게 사용하는 것입니다! 따라서 SVG를 만들려면이 장점이어야합니다.

 svgsvgelement로서 document.createelementns ( 'http://www.w3.org/2000/svg', 'svg');

분명히 다른 도우미 기능을 만들 수 있습니다.

 constrestesvgnselement = (요소 : 문자열) : svgelement => {
  return document.createElementns ( 'http://www.w3.org/2000/svg', 요소);
};

우리가 직사각형을 DOM에 추가 할 때, 우리는 그들의 명령에주의를 기울여야합니다. 그렇지 않으면 z-index를 명시 적으로 지정해야합니다. 첫 번째 직사각형은 가장 큰 사각형이어야하며 마지막 사각형은 가장 작아야합니다. 루프 전에 데이터를 정렬하는 것이 가장 좋습니다.

 const data = rawdataset.sort (
  (A : DataSetentry, B : DataSetentry) => B. value- a.Value
);

data.foreach ((d : dataSetentry, index : number) => {
  const rect : svgrecteLement = svgrectElement ( 'rect');
  const rectdimension : number = remapdatasetvaluetosvgdimension (d. value);

  rect.setattribute ( 'width',`$ {rectdimension}`);
  rect.setAttribute ( '높이',`$ {rectdimension}`);
  rect.setAttribute ( 'y',`$ {svgdimension- rectdimension}`);

  svg.appendchild (rect);
});

좌표계는 왼쪽 상단에서 시작됩니다. 그것이 [0, 0]이있는 곳입니다. 우리는 항상 왼쪽에서 사각형을 그릴 것입니다. 수평 위치를 제어하는 ​​X 속성은 기본값을 0으로 설정하므로 설정할 필요가 없습니다. y 속성은 수직 위치를 제어합니다.

모든 사각형이 왼쪽 모서리에 닿는 것과 같은 지점에서 유래한다는 시각적 인상을주기 위해서는 사각형을 아래로 밀어서 말해야합니다. 얼마나? 사각형이 채워지지 않는 정확한 양. 그리고 그 값은 차트의 치수와 특정 사각형의 차이입니다. 우리가 모든 비트를 합치면, 우리는 이것으로 끝납니다.

우리는 이미 CSS를 사용 하여이 데모에 애니메이션 코드를 추가했습니다.

컷 아웃 직사각형

우리는 사각형을 숫자 7처럼 보이는 불규칙한 모양으로 바꾸어야합니다.

우리가“누락 된 부품”에 집중한다면, 우리는 이미 우리와 함께 일하고있는 것과 동일한 직사각형의 컷 아웃을 볼 수 있습니다.

우리는 그 컷 아웃을 숨기고 싶습니다. 그것이 우리가 원하는 L 자형으로 끝날 방법입니다.

마스킹 101

마스크는 당신이 정의하고 나중에 요소에 적용하는 것입니다. 일반적으로 마스크는

 <svg>
  <mask>
    
  마스크>
</mask></svg>

태그 에서 실제 마스크 역할을하는 모양을 넣습니다. 또한 마스크 속성을 요소에 적용합니다.

 <svg>
  <mask>
    
  마스크>
  <rect mask="url (#mycleverlynamedmask)"> </rect>
</mask></svg>

마스크를 정의하거나 적용하는 유일한 방법은 아니지만이 데모에서 가장 간단한 방법입니다. 마스크를 생성하기 위해 코드를 작성하기 전에 약간의 실험을합시다.

우리는 기존 사각형의 크기와 일치하는 컷 아웃 영역을 덮고 싶다고 말했습니다. 우리가 가장 큰 요소를 취하고 이전 사각형을 마스크로 적용하면이 코드로 끝납니다.

 <svg viewbox="0 320 320">
  <mask>
    <rect width="264" height="264" y="56" fill=""> </rect>
  마스크>
  <rect width="320" height="320" y="0" fill="#264653" mask="url (#themask)"> </rect>
</mask></svg>

마스크 내부의 요소는 충전 값이 필요합니다. 그게 뭐야? 우리는 우리가 선택한 채우기 값 (색)에 따라 완전히 다른 결과를 볼 수 있습니다.

하얀 채우기

채우기에 흰색 값을 사용하면 다음을 얻습니다.

이제 우리의 큰 사각형은 마스킹 사각형과 같은 치수입니다. 우리가 원하는 것이 아닙니다.

검은 색 채우기

대신 검은 값을 사용하면 다음과 같습니다.

우리는 아무것도 보지 못합니다. 검은 색으로 채워진 것이 보이지 않기 때문입니다. 우리는 흰색과 검은 색 충전재를 사용하여 마스크의 가시성을 제어합니다. 점선은 보이지 않는 영역의 차원을 참조하기위한 시각적 원조로 있습니다.

회색 채우기

이제 흰색과 검은 색 사이에 무언가를 사용해 봅시다.

완전히 불투명하거나 견고하지도 않습니다. 투명합니다. 따라서 이제 우리는 흰색과 검은 색 값과는 다른 것을 사용하여 뒷 주머니에 보관하는 좋은 트릭을 사용하여 여기서“가시성 정도”를 제어 할 수 있다는 것을 알고 있습니다.

마지막 비트

지금까지 마스크에 대해 우리가 다루고 배운 내용은 다음과 같습니다.

• 내부의 요소는 마스크 영역의 치수를 제어합니다.
• 우리는 가면이있는 영역의 내용을 가시적이거나 보이지 않거나 투명하게 만들 수 있습니다.

우리는 마스크에 하나의 모양 만 사용했지만 범용 HTML 태그와 마찬가지로 원하는만큼 많은 어린이 요소를 둥지로 만들 수 있습니다. 실제로, 우리가 원하는 것을 달성하기위한 속임수는 두 개의 svg

 <svg viewbox="0 320 320">
  <mask>
    <rect width="320" height="320" y="0" fill="???"> </rect>
    <rect width="264" height="264" y="56" fill="???"> </rect>
  마스크>
  <rect width="320" height="320" y="0" fill="#264653" mask="url (#maskw320)"> </rect>
</mask></svg>

우리의 마스킹 직사각형 중 하나는 흰색으로 가득 차 있습니다. 다른 하나는 검은 색으로 가득 차 있습니다. 규칙을 알고 있더라도 가능성을 시험해 보겠습니다.

 <mask>
  <rect width="320" height="320" y="0" fill="black"> </rect>
  <rect width="264" height="264" y="56" fill="White"> </rect>
마스크></mask>

은 가장 큰 요소의 치수이며 가장 큰 요소는 검은 색으로 채워집니다. 그것은 그 지역의 모든 것이 보이지 않다는 것을 의미합니다. 그리고 작은 사각형 아래의 모든 것이 보입니다.

이제 검은 사각형이 위에있는 곳을 뒤집어 봅시다.

 <mask>
  <rect width="320" height="320" y="0" fill="White"> </rect>
  <rect width="264" height="264" y="56" fill="black"> </rect>
마스크></mask>

이것이 우리가 원하는 것입니다!

가장 큰 흰색으로 채워진 직사각형 아래의 모든 것이 보이지만 작은 검은 사각형이 그 위에 있으며 (z 축에서 우리와 더 가깝습니다) 그 부분을 마스킹합니다.

마스크 생성

이제 우리가해야 할 일을 알았으므로 상대적으로 쉽게 마스크를 만들 수 있습니다. 그것은 우리가 처음에 컬러 직사각형을 생성하는 방법과 비슷합니다. 우리는 마스크와 두 개의 직장을 만드는 보조 루프를 만듭니다.

이번에는 REST를 SVG에 직접 추가하는 대신 마스크에 추가합니다.

 data.foreach ((d : dataSetentry, index : number) => {
  const mask : svgmaskelement = svgmaskelement = svgmaskelement ( 'mask');

  const rectdimension : number = remapdatasetvaluetosvgdimension (d. value);
  const rect : svgrecteLement = svgrectElement ( 'rect');

  rect.setattribute ( 'width',`$ {rectdimension}`);
  // ... 나머지 속성 설정 ...

  mask.setattribute ( 'id',`maskw $ {rectdimension.tofixed ()}`);

  마스크. AppendChild (rect);

  // ... 작은 사각형의 속성을 만들고 설정 ...

  svg.appendchild (마스크);
});

data.foreach ((d : dataSetentry, index : number) => {
    // ... 색상의 사각형을 생성하는 코드 ...
});

우리는 인덱스를 마스크의 ID로 사용할 수 있지만 적어도 나에게 더 읽기 쉬운 옵션으로 보입니다.

 mask.setattribute ( 'id',`maskw $ {rectdimension.tofixed ()}`); // maskw320, masw240, ...

마스크에 더 작은 사각형을 추가 할 때, 우리는 이전에 사각형 값을 가장 높은 것에서 가장 낮은 곳에서 가장 낮게 주문했기 때문에 필요한 값에 쉽게 액세스 할 수 있습니다. 즉, 루프의 다음 요소는 작은 사각형이며, 우리가 참조 해야하는 요소입니다. 그리고 우리는 그 지수로 그렇게 할 수 있습니다.

 // ... 우리가 마스크와 사각형을 만든 이전 부분 ...

Const SmallErrectIndex = 색인 1;

// 우리가 가장 작은 사람이있을 때 다음은 없습니다.
if (data [smallerRectIndex]! == 정의되지 않은) {
  const smallerrectdimension : number = remapdatasetvaluetosvgdimension (
    데이터 [smallerRectIndex] .Value
  );
  Const SmallErrect : svgrecteLement = createSvGnSelement (
    'rect'
  ) SVGRECTELEMENT로서;

  // ... 사각형 속성 설정 ...

  마스크. AppendChild (SmallErrect);
}

svg.appendchild (마스크);

남은 것은 원래 루프의 컬러 사각형에 마스크 속성을 추가하는 것입니다. 선택한 형식과 일치해야합니다.

 rect.setattribute ( 'mask',`url (#maskw $ {rectdimension.tofixed ()}); // maskw320, maskw240, ...

최종 결과

그리고 우리는 끝났습니다! 우리는 중첩 사각형으로 만든 차트를 성공적으로 만들었습니다. 마우스 호버에서도 분리됩니다. 그리고 요소를 사용하여 각 정사각형의 컷 아웃 영역을 그리는 SVG였습니다.

위 내용은 마스크를 사용하여 중첩 사각형의 애니메이션 차트를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!