JSXGraphをReactアプリで使う

May 01, 2021

JSXGraphというグラフを描画するライブラリがある。

JSXGraph - JSXGraph

これをReactアプリに組み込みたかったので、jsxgraph-react-jsを使ってみた。

sytabaresa/jsxgraph-react-js: React component library for use Javascript or JessieCode for make JSXGraph boards

インストール。
TypeScript対応はされていないので、JS用のライブラリを使う。

$ yarn add jsxgraph-react-js

1次関数をグラフ化するときは以下のように実装する。

import React from 'react'
import JXGBoard from 'jsxgraph-react-js'

const Component = () => {
  const xmin = -10, xmax = 10, ymin = -10, ymax = 10

  const logic = (board) => {
    board.suspendUpdate()

    const func = (x) => { return x + 1 }
    board.create('functiongraph', [func, xmin, xmax], { strokeWidth: 2 })

    board.unsuspendUpdate()
  }

  return (
    <JXGBoard
      logic={logic}
      boardAttributes={{ axis: true, boundingbox: [xmin, ymax, xmax, ymin] }}
    />
  )
}

export default Component

logic関数を実装してJXGBoardにわたす。
この関数は引数としてJSXGraphのboardが渡されるので、これに色々追加していく。

JSXGraphと同じように使えるので、スライダーやラベルの表示もできる。
TypeScriptが使えないが、Reactで使うならこれで十分。