브라우저에서 함수 차트를 그리는 JavaScript 라이브러리 JSXGraph 및 공식을 설정하는 JavaScript 라이브러리 MathJax 사용법의 노트입니다.이번에 제작된 샘플의 화면은 이겁니다.

DEMO: https://codepen.io/kaz_hashimoto/pen/vYKvyVr
이 DEMO에서 메뉴에서 곡선 유형을 선택하면 그래프와 함수에 대한 공식이 표시됩니다.그 중의 한 도표는 슬라이더로 함수의 매개 변수를 조정할 수 있다.만약 도표가 업데이트된다면, 아래의 색 도표도 반영될 것이다.10개의 칸의 배경색은 기본 색rgb(128,255,0)에 비해 α 채널에서 y=f(x)(x=n/10, n=1~10)의 값을 지정하여 얻은 색이다.
작업 환경(기사 작성 시)

JSXGraph v1.1.0

MathJax v3.1.2

jQuery 3.5.1

동작 확인 브라우저: 데스크톱 Chrome86, Firefox82, Safari 14, Opera 72

macOS 10.14 Mojave

JSXGraph 및 MathJax 사용 방법

설정

JSXGraph 및 MathJax 라이브러리는 CDN에서 사용할 수 있습니다.HTML 파일에 추가된 행은 다음과 같습니다.
JSXGraph
html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.1.0/jsxgraph.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.1.0/jsxgraphcore.min.js"></script>

MathJax
html

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

포함된 대상의 div 설정

도표와 공식을 삽입하기 위해 두 개의 빈div를 준비하십시오.JSXGraph의 API는 HTML 요소의 id로 그래프의 그리기 영역을 만들어야 하기 때문에 그래프의 출력 위치의div에 id="plot"를 추가했습니다.
html

<div class="graph-wrap">
  <!-- グラフの出力先(JSXGraph用) -->
  <div id="plot" class="graph"></div>
  <!-- 数式の出力先(MathJax用) -->
  <div class="math"></div>
</div>

차트의 출력 목적지div.plot 요소는 CSS에서 미리 영역을 확보합니다.이 견본품의 너비와 높이는 모두 260px로 설정되어 있다.
css

.graph-wrap {
  width: 260px;
}
.graph {
  width: 100%;
  height: 260px;
}

JSXGraph 사용 방법

Board 만들기

먼저 JXG.JSXGraph 방법initBoard을 사용하여 도면 영역 포위함을 생성합니다.첫 번째 매개변수는 드로잉 영역의 HTML 요소로서 id입니다.영역의 크기는 왼쪽 위, 오른쪽 아래 정점의 좌표 성분 배열boundingbox에 의해 지정됩니다.
javascript

let board = JXG.JSXGraph.initBoard('plot', {
  boundingbox: [ -0.1, 1.1, 1.1, -0.1],  // 領域の座標[左、上、右、下]
  axis: true,  // 軸を表示する
  showNavigation: false,  // ナビゲーションボタンを表示しない
  showCopyright: false    // コピーライト文字列を表示しない
});

축 머리글 추가

축 제목을 추가합니다.JSXGraph API는 축 제목을 지정하는 기능이 없기 때문에 Board의create 방법을 호출하여 문자열을 기하학적 요소text로 board에 구성한다.
javascript

const text_css = 'font-family: "Times New Roman", Times, "serif"; font-style: italic';
board.create('text', [1.05, 0.08, 't'],
       { fontSize: 16, cssStyle: text_css });
board.create('text', [0.05, 1.05, 'y'],
       { fontSize: 16, cssStyle: text_css });

텍스트의 위치와 내용은 create()의 두 번째 매개 변수에서 [x 좌표, y 좌표, 문자열] 형식으로 지정됩니다.텍스트 스타일은 세 번째 매개 변수로 지정되며 fontSize 이외의 스타일은 CSS 규칙 집합cssStyle 항목의 값으로 지정됩니다.
참조) Wiki: Texts and Transformations

함수도 그리기

함수의 도표를 그리려면 Board 방법의 첫 번째 매개 변수에 create를 지정하십시오.다음 코드는 함수functiongraph(0≤t≤1)의 곡선도를 그립니다.
javascript

function bezier(t) {
  return t * t * (3 - 2 * t);
}

let graph = board.create('functiongraph', [bezier, 0, 1]);

슬라이더 생성하기

차트슬라이더에서 설정할 수 있습니다.슬라이더를 만들려면 bezier(t)의 Board 방법을 첫 번째 매개변수create로 지정합니다.다음 코드는 라벨slider의 슬라이더를 눈금 시작 위치의 좌표(0.20.4), 끝 위치(0.80.4)에 놓고 값의 범위를 1~4로 설정하고 초기 값을 2로 설정합니다.
javascript

let slider = board.create('slider', [[0.2, 0.4], [0.8, 0.4], [1, 2, 4] ], {name: 'p'});

슬라이더의 현재 값은 p 방법으로 읽습니다.등록Value이벤트의 프로세서를 통해 핸들을 이동할 때 슬라이더의 값을 얻을 수 있습니다.
javascript

slider.on('drag', function(e) {
  console.log('p=' + this.Value());
});

매개 변수를 포함하는 함수의 도표

다음은 매개 변수 p를 포함하는 함수 f(t,p) 곡선을 그리는 방법입니다.슬라이더를 통해 p의 값을 이동하면 도표에 곡선 모양의 변화를 반영할 수 있다.다음 코드는 매개 변수 p를 포함하는 함수drag(0≤t≤1)의 곡선1에 사용되며, 슬라이더에서 p의 현재 값을 읽고 도표를 그립니다.
javascript

function parameterized(t) {
  const p = slider.Value();
  const tp = t**p;
  return tp / (tp + (1 - t)**p);
}

graph = board.create('functiongraph', [parameterized, 0, 1]);

차트 요소 제거

메뉴에서 도표를 전환하거나 슬라이더에서 파라미터 p의 값을 이동할 때, 도표 내용을 업데이트하기 전에 현재 보이는 곡선 등을 삭제해야 합니다.그렇지 않으면 이전 곡선이 화면에 남아 있는 상태에서 새로운 곡선이 추가됩니다.그래프 요소를 삭제하려면 parameterized(t)의 removeObject 방법을 사용하십시오.
javascript

function clearGraph() {
  if (graph) { // 今表示されている曲線があれば消す
    board.removeObject(graph);
    graph = null;
  }
  if (slider) { // スライダーが表示されていれば消す
    board.removeObject(slider);
    slider = null;
  }
}

이렇게 하면 도표를 그릴 수 있어!다음은 방정식입니다.

MathJax 사용 방법

MathJax를 사용하여 방정식을 그리려면 출력 대상divBoard에서 LaTeX 명령에 기술된 방정식의 문자열을 설정하고 innerHTML 함수를 호출합니다.다음 코드는 변수MathJax.typeset()에 설정된 표시 방정식 모드의 LaTex 형식 문자열(\$\$...\$\$)을 요소의 천막에 쓴 후 math 함수를 사용하여 공식을 그립니다.형식 집합을 업데이트하기 전에 현재 상태를 지우기 위해 원소div.math에 함수를 호출합니다.
javascript

MathJax.typesetClear([$('.math').get(0)]);
const math = '$$f_{p}(t)=\\frac{t^p}{t^p+(1-t)^p}$$';
$('.math').html(math);
MathJax.typeset();

참조)Typesetting and Converting Mathematics
LaTex 유형 설정의 표시를 확인할 때 Live Demo가 편리합니다.
https://www.mathjax.org/#demo
참고) 위 코드 예제에서 "\\\rac"처럼 LaTex 명령 이전의 백슬래시는 피하지만 Live Demo의 텍스트 영역에 백슬래시 1개를 입력합니다.
이 함수의 공식은 Stackexchange 문장Ease-in-out function에서 인용↩