CSS 및 HTML로 좌표계 구성하기

나는 동적cartesian coordinate system을 개발했다.그것은 약간 기본적일 수 있지만, 나는 그것이 매우 재미있다고 생각한다. 왜냐하면 너는 많은 다른 함수를 삽입하고 점을 정확하게 표시할 수 있기 때문이다.또한 다음과 같은 흥미로운 기능도 있습니다.

맞춤형 구성: 색상, 크기, 범위, 시스템 센터 등 선택

응답: 기본적으로 부모 너비의 100%이지만 상대/절대 크기를 가질 수 있습니다.

사용 편이성: 함수를 CSS로 직접 변환합니다.

경량: 표시할 점마다 CSS 35행과 HTML 한 행이 있습니다.JavaScript가 없습니다.

네, 잘 읽었습니다. 함수 계산은 자바스크립트를 사용하지 않습니다.대신 CSS calc() method를 모두 사용합니다.
기사 내용:

Introduction

The Code

Variables

Examples and Demos

Accessibility

What's next?

소개하다.

9월의 주말, 그래, 그 이후로 나는 줄곧 이 글을 썼지만, 발표한 적이 없다😳–, 나는 일찍 깨어 집안의 다른 사람들이 아직 자고 있는 틈을 타서 HTML과 CSS를 놀기로 결정했다.트위터를 보면 다음과 같은 트윗이 있습니다.


라이베로
리플로

calc () 를 통해 사용자 정의 속성의 일련의 값을 다른 일련의 값으로 바꾸려고 시도한 적이 있습니까?나는 이 때문에 작은 응용 프로그램을 만들었다!codepen.io/leaverou/pen/b…(제가 바쁘지 않을 때 상세한 블로그 댓글을 써주셨으면 좋겠어요)
2021년 9월 25일 오후 17:59
그녀는 calc() 선형 함수를 생성한 후의 일련의 값을 사용했다.이것은 흥미로운 방법으로 calc()와 사용자 정의 속성을 결합하여 사용한다(나도 및 다른 사람이 완성하는 것을 본 적이 있다).나도 이런 거 해보고 싶어.아마도 2차 함수로 예를 들 수 있을 것이다.그리고 한 가지 일이 다른 일을 초래하고, 시범이 성장하기 시작했다.
먼저, 나는 데카르트 시스템의 기본 그림을 구축했는데, 그 중에는 HTML과 CSS만 있는 2차 함수가 있다.모든 값은 하드코딩이기 때문에 너무 구체적이다.그리고 가능한 한 많은 함수인 선형, 2차, 3차 등과 일치하도록 점점 통용시키려고 노력했다. 성공했다.그것은 새로운 업무에 아주 잘 적응했다.이것도 복잡한 시범이 아니다.

비밀 번호

데카르트 시스템의 전체 코드는 40줄 미만의 CSS 코드를 수용할 수 있습니다!이것은 CSS custom properties의 사용을 고려하여 전체 과정이 좀 지루하지만 맞춤형으로 제작할 수 있기 때문에 서로 양해하고 양보하는 상황이다)
다음은 CSS 코드입니다.

.css-ccs {
  --c: 10;
  --cx: 5;
  --cy: 5;
  --dsize: 10;
  --dcolor: #369;
  --size: 100%;
  position: relative;
  width: var(--size);
  height: 0;
  padding-top: var(--size);
  box-sizing: border-box;
  aspect-ratio: 1/1;
  background-image:
    linear-gradient(#0000 calc(var(--cy) * 100% / var(--c) - 1px), #0008 0 calc(var(--cy) * 100% / var(--c) + 1px), transparent 0),
    linear-gradient(to right, #0000 calc(var(--cx) * 100% / var(--c) - 1px), #0008 0 calc(var(--cx) * 100% / var(--c) + 1px), transparent 0),
    repeating-linear-gradient(#0002 0 0.5px, #0000 0 calc(100% / var(--c) - 0.5px), #0002 0 calc(100% / var(--c))),
    repeating-linear-gradient(to right, #0002 0 0.5px, #0000 0 calc(100% / var(--c) - 0.5px), #0002 0 calc(100% / var(--c)));
}

.css-ccs.no-overflow {
  overflow: hidden;
}

.css-css .dot {
  --translationUnit: 100% / var(--c);
  --translationX: var(--translationUnit) * var(--cx);
  --translationY: var(--translationUnit) * var(--cy);
  /* Vertical is "flipped" in CSS: higher values go down! Do negative! */
  --y: calc(var(--translationY) - var(--translationUnit) * var(--function));
  width: calc(var(--dsize) * 1px);
  height: calc(var(--dsize) * 1px);
  background: var(--dcolor);
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  left: calc(var(--translationX) + var(--x) * var(--translationUnit));
  top: var(--y);
}

이 .css-ccs 코드는 축과 안내서를 생성하고 .dot는 이후의 기능 설정 단계를 설정합니다.
HTML에 대해서는 css-ccs (CSS 피리칼 좌표계) 의 요소가 필요합니다. 클래스 dot 의 다른 요소를 포함하고, 이 요소들은 x 에서 style 값을 설정합니다.예를 들면 다음과 같습니다.

<div class="css-ccs">
  <div class="dot" style="--x: -3;"></div>
  <div class="dot" style="--x: 0;"></div>
  <div class="dot" style="--x: 1;"></div>
  <div class="dot" style="--x: 2;"></div>
  <!-- ... -->
</div>

이상적인 상황에서 나는 이런 것을 가지고 싶다.

<figure>
  <figcaption>Graph Title</figcaption>
  <output data-x="-3"></output>
  <output data-x="0"></output>
  <output data-x="1"></output>
  <output data-x="2"></output>
</figure>

비록 내가 최종적으로 라벨을 바꿀 수 있지만, 모든 변경이 가능한 것은 아니다.data-x는 x 값을 표시하는 가장 좋은 방법이 될 것이다.'스타일 변수'가 아니라 데이터의 데이터 속성이다.불행하게도 CSS는 현재 데이터 속성을 읽고 값을 사용자 정의 속성에 전달하는 것을 지원하지 않습니다.그래서 맞춤형 속성은 이제 됐습니다.
마지막으로, 우리는 함수를 도형에 삽입해야 한다.이것은 .dot 클래스에 적용될 뿐만 아니라, (약간) 간단할 것이다. 우리는 --function 함수를 사용하여 점에 calc() 사용자 정의 속성을 정의할 것이다.이렇게
함정CSS에는 멱(or many other types of operations for that matter)이 없기 때문에 x2와 같은 일을 하려면 x를 x(x*x)로 곱해야 한다.우리는 --x 사용자 정의 속성에 x가 있기 때문에 다음과 같은 작업을 수행해야 합니다.

.my-chart .dot {
  /**
   * x^2 = x * x = var(--x) * var(--x)
   */
  --function: calc(var(--x) * var(--x));
}

좀 지루하지만 여전히 간단하고 이해하기 쉽다.

변량

우리는 그래프를 사용자 정의하여 일부 CSS 변수를 그래프 자체(컨테이너)에 전달하고 각 점에 전달할 수 있습니다.
컨테이너 변수는 다음과 같습니다.
성함
약속을 어기다
묘사--c10
번호차트의 크기(총 셀)틀림없이 정수다.--cx5
번호x축이 도표에 있는 위치.그것은 반드시 정수여야 한다.그것은 옳거나 작거나 같아야 한다--c.--cy5
번호y축의 도표에 있는 위치.그것은 반드시 정수여야 한다.그것은 옳거나 작거나 같아야 한다--c.--dsize10
번호점의 크기(픽셀 단위)입니다.그것은 반드시 플러스이고 0보다 커야 한다.--dcolor#369
색깔점의 색상(모든 색상 형식)--size100%
길이.좌표계의 너비.그것은 절대적일 수도 있고, 부모 대상을 상대할 수도 있다.
CSS 캐스케이드 때문에 각 점의 값을 개별적으로 재정의할 수 있습니다.또한 우리는 반드시 전달점의 x값을 전달해야 한다.
성함
약속을 어기다
묘사--dsize10
번호점의 크기(픽셀 단위)입니다.그것은 반드시 플러스이고 0보다 커야 한다.--dcolor#369
색깔점의 색상(모든 색상 형식)--x해당 없음
번호필수이었어함수에 전달하고 그림에 표시할 x의 값.

예제 및 프레젠테이션

다음은 이 방법을 사용하여 그려진 CSS 그래프의 예입니다.

선형 함수: x-3

#axis_x-3 .dot {
  /**
   * f(x) = x - 3
   *        x = var(--x)
   */
  --function: calc(var(--x) - 3);
}

이차 함수:x2-5

#axis_x2-5 .dot {
  /**
   * f(x) = x^2 - 5
   *        x^2 = var(--x) * var(--x)
   */
  --function: calc(var(--x) * var(--x) - 5);
}

입방 함수:0.4x3-5.25x-4

#axis_04x3_525x_4 .dot {
  /**
   * f(x) = 0.4x^3 - 5.25x - 4
   *        0.4x^3 = var(--x) * var(--x) * var(--x)
   *         5.25x = 5.25 * var(--x)
   */
  --function: calc(0.4 * var(--x) * var(--x) * var(--x) - 5.25 * var(--x) - 4);
}

역수 제곱 함수: 1 / x2

#axis_1_x2 .dot {
  /**
   * f(x) = 1 / x^2
   *        x^2 = var(--x) * var(--x)
   */
  --function: calc(1 / (var(--x) * var(--x)));
}

가달성

이 도표들은 보기에는 괜찮을 것 같지만, 접근성 있는 도전을 제기했다.전체 도표가 비어 있기 때문에 우리는 적어도 하나를 추가해야 한다 aria-label with a description of the content.또 한 배역도 괜찮다.role의'img'나'figure'를 추가하면 보조 기술 부서에 도표를 정확하게 발표하는 데 도움이 될 것이다.
더 좋은 것은 우리가 사용할 수 있다는 것이다 <figure> / <figcaption> tags.그러나 배경이 용기의 100%를 차지하고 겹칠 수 있기 때문에 CSS 연습을 해야 합니다.
데이터 포인트는 현재<div>이지만 더 많은 의미 표기는 이 요소들이 무엇인지 더 잘 설명할 것이다.(예: <output> , <data> 또는 <samp> .

<div class="css-ccs" 
     role="img" 
     aria-label="Cartesian coordinate system representing the function ... with points at ...">
  <!-- ... -->
</div>

이외에 이 점들은 아무런 정보도 없으니, 정지/초점에 관한 데이터가 있으면 좋겠다.만약/우리가 이렇게 할 때 우리는 이 두 주의 접근성을 고려해야 하기 때문에 보조 기술 사용자에게 좋은 대안이 있다.

다음

CSS가 잘 작동하는 것은 좋은 실험이지만, 많은 관건적인 특성이 부족하다.일부는 HTML 및 CSS로 추가 또는 시뮬레이션할 수 있지만 다른 일부는 JavaScript가 필요합니다.그럼에도 불구하고, 우리의 작은 좌표 시스템은 여전히 경량급과 간단하다.
CSS는 그래픽을 제한합니다.CSS 수학 함수 목록이 증가하고 있다(min, max, clamp 등등). 우리는 흔히 볼 수 있는 조작을 모의할 수 있다(as Ana Tudor shows in her articles. 그러나 여전히 많은 수학 계산이 CSS로만 완성할 수 없기 때문에 이것은 우리를 제한할 것이다.
라이브러리에 계속 구축할 필요는 없지만, 작은 예시를 그리는 데 도움이 될 수도 있고, 대량의 외부 라이브러리가 필요하지 않을 수도 있다. (나는 40줄의 CSS와 100KB의 JS 패키지를 사용할 것이다.)이 문제를 개발하고 해결하는 것도 흥미롭다.