Vue 및 D3로 데이터 시각화: 항성 계산(2부)

당신은 본문의 첫 번째 부분here을 찾을 수 있습니다.
첫 번째 부분을 건너뛰면 here 시작 코드입니다.😉

우리는 무엇을 건설해야 합니까?

본고에서, 우리는 D3 데이터 축소를 사용하여 우리의 스타 예시를 개선할 것이다.Scale 함수는 JavaScript 함수입니다.

입력(일반적으로 숫자, 날짜 또는 범주) 및

값이 반환됩니다(예: 좌표, 색상, 길이 또는 반지름).

일반적으로 데이터 값을 위치, 길이 및 색상과 같은 시각 변수로 변환하는 데 사용됩니다.이렇게 하면 초기 데이터 세트를 SVG로 신속하게 그릴 수 있습니다.
따라서 우리는 우리의 항성'시각'을 특정한 데이터 값에 비추게 될 것이다.글의 마지막 부분에서 우리 스타들은 이렇게 볼 것이다.

별 반지름 크기 조정

첫 번째 뚜렷한 문제는 왜 우리가 반경을 축소해야 하는가 하는 것이다.우리는 previous article 에서 빛에 대한 것처럼 축소되지 않은 값을 사용할 수 없습니까?
왜냐하면 우리는 우리의 항성 외반경을 제한하고 데이터 값을 입력하면 큰 범위 내에서 변화할 수 있기 때문이다.D3는 비율을 계산하고 우리의 항성 반지름을 비율에 따라 축소합니다.
첫 번째 교체에 대해 우리의 입력 값이 10에서 1000으로 축소될 것이라고 가정하지만, 우리는 최대 반경이 250px인 항성을 표시하기를 희망한다.계산을 위해 D3map 방법을 사용합니다.

scaleLinear constructs a new continuous scale with the specified domain and range. Each range value y can be expressed as a function of the domain value x: y = mx + b. (D3 Wiki)

우선, scaleLinear 에서 하드 인코딩 outerRadius 을 삭제하고, 새로운 data 속성을 만들어서 계산합시다.반대로 우리는 데이터에 computed 속성을 추가할 것이다.그것은 우리의 입력 값으로 될 것이다.

data() {
  return {
    radius: 300,
    rays: 8,
  };
},
computed: {
  outerRadius() {
    return this.radius
  },
  ...
},

현재radius는 우리가 입력한 outerRadius만 되돌려줍니다.이제 줌을 추가합시다!먼저 D3에서 가져오는 방법radius이 필요합니다.

import { lineRadial } from 'd3-shape';
import { scaleLinear } from 'd3-scale';

우리는 scaleLinear 방법으로 축소 함수를 정의한 다음에 입력 scaleLinear 을 매개 변수로 사용하여 이 함수를 호출해야 한다.

computed: {
  outerRadius() {
    const scale = scaleLinear()
      .domain([10, 1000])
      .range([5, 250]);

    return this.radius
  },
  ...
},

여기서 무슨 일이 일어났습니까?우리는 입력 값이 변화할 범위인 radius부터 domain까지 제공했다.scaleLinear에 대해 말하자면 이것이 바로 우리의 range: 우리는 우리의 output가 5px에서 250px 사이에서 변화하기를 바란다.
이제 우리는 outerRadius 함수에 radius 전달할 수 있습니다.

computed: {
  outerRadius() {
  const scale = scaleLinear()
    .domain([10, 1000])
    .range([5, 250]);

  return scale(this.radius)
  },
  ...
},

따라서 다음과 같은 내용이 있습니다.
.scale 속성을 500 또는 1000으로 변경하면 항성의 크기가 어떻게 증가하는지 볼 수 있습니다.
이제 빛과 유사하게 항성 반지름을 동적으로 변경하는 입력을 추가합니다.우리 radius 에서 추가

<div class="range-input">
  <label for="radius">Radius</label>
  <input name="radius" type="range" min="10" max="1000" v-model="radius" />
</div>

이렇게 하면 우리는 template 데이터 속성을 입력 필드 값에 연결합니다.
.

응용 프로그램 스타일 설계

현재 우리는 항성의 반경과 광선량을 바꿀 수 있지만, 그것은 여전히 어두운 녹색을 유지한다.만약 우리가 그것을 개선할 수 있다면?만약 우리의 항성이 진정한 항성이라면, 그것은 색깔proportionally to its temperature을 바꾸고, 빨간색에서 파란색으로 바뀔 것이다.우리는 같은 비율을 만들 수 있습니까?D3의 경우😊.
그러나 우리가 일을 시작하기 전에 우리는 응용 프로그램에 대해 약간의 스타일 디자인을 할 것이다.먼저 슬라이더를 이미지의 오른쪽으로 이동합니다.그러려면 템플릿을 약간 변경해야 합니다.

<template>
  <section class="wrapper">
    <svg width="500" height="500">
      <path
        class="radial"
        :d="radialData"
        transform="translate(250, 250)"
        fill="green"
      ></path>
    </svg>
    <aside>
      <div class="range-input">
        <input name="rays" type="range" min="4" max="60" v-model="rays" />
        <label for="rays">Rays</label>
      </div>
      <div class="range-input">
        <input
          name="radius"
          type="range"
          min="10"
          max="1000"
          v-model="radius"
        />
        <label for="radius">Radius</label>
      </div>
    </aside>
  </section>
</template>

radius 섹션에 스타일을 추가합니다.

<style lang="scss">
  .wrapper {
    display: flex;
    align-items: center;
  }
  aside {
    padding-left: 20px;

    .range-input {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      input {
        margin-right: 10px;
      }
    }
  }
</style>

이제 어플리케이션은 더욱 구조화되어 보입니다.
.
그 밖에 우리는 우리의 항성이 더욱 가볍기를 바란다. 예를 들면...응, 진짜 스타 같아!우리는 그것에게 짙은 파란색 직사각형의 짙은 색 배경을 주었고, 지금은 별의 색깔을 흰색으로 바꾸었다.

<svg width="500" height="500">
  <rect width="100%" height="100%" fill="#0e0432" />
  <path
    class="radial"
    :d="radialData"
    transform="translate(250, 250)"
    fill="white"
  ></path>
</svg>

이제 우리는 스타의 색깔을 바꾸는 놀이를 할 수 있다!

별 색상의 사용자 배율 만들기

D3에는 built-in color interpolators가 있지만 간단하게 구축하고 싶습니다.0에서 100까지의 입력 값을 가져오고 0, 25, 50, 75, 100 표시에 대한 색을 정의합니다.D3는 중간 값에 색상을 삽입할 만큼 지능적입니다.
우선, 우리는 새로운 style 속성 - data 을 만들고 그것을 5로 설정합니다.

data() {
  return {
    radius: 300,
    rays: 8,
    heat: 5,
  };
},

다음은 별 색상 계산을 위한 새로운 heat 속성을 만듭니다.

starColor() {
  return this.heat
},

마지막으로, 우리는 새로운 규모를 만들 준비를 하고 있다.

starColor() {
  const myColor = scaleLinear()
    .domain([0, 25, 50, 75, 100])
    .range(['#ff7665', '#ffb469', '#ffe876', '#fff', '#99cdff']);
  return myColor(this.heat);
},

이제 정적 computed 색상이 아닌 SVG path fill 속성에 별 색상을 추가할 준비가 되었습니다.동적 바인딩을 만듭니다.

<path
  class="radial"
  :d="radialData"
  transform="translate(250, 250)"
  :fill="starColor"
></path>

우리 스타가 색깔이 변했어!
.white 데이터 속성을 90으로 변경하면 항성이 옅은 파란색으로 바뀝니다.흰색에서 현재 항성까지의 색상 그래디언트를 생성할 수 있습니다.

<svg width="500" height="500">
  <defs>
    <radialGradient id="starGradient">
      <stop offset="2%" stop-color="white" />
      <stop offset="95%" :stop-color="starColor" />
    </radialGradient>
  </defs>
  ...
</svg>

이제 우리는 순색 대신 이 점차적인 변화로 우리의 항성을 채울 수 있다.

<svg width="500" height="500">
  <defs>
    <radialGradient id="starGradient">
      <stop offset="2%" stop-color="white" />
      <stop offset="95%" :stop-color="starColor" />
    </radialGradient>
  </defs>
  <rect width="100%" height="100%" fill="#0e0432" />
  <path
    class="radial"
    :d="radialData"
    transform="translate(250, 250)"
    fill="url(#starGradient)"
  ></path>
</svg>

지금 우리 스타는 정말 예뻐요.

나머지 마지막 작업은 우리가 이전에 빛과 반지름에 대해 했던 것과 같은 입력 슬라이더를 추가하는 것이다.

<div class="range-input">
  <input name="heat" type="range" min="0" max="100" v-model="heat" />
  <label for="heat">Heat</label>
</div>

우리 준비됐어!차트 구성 요소의 최종 코드here를 찾을 수 있습니다.

다음은 뭐예요?

세 번째 부분에서, 우리는 항성이 아니라 전체 별자리를 만들 것이다!Vue 저장소의 실제 데이터 세트를 시각화합니다.