drawChizu関数
リファレンスの説明と例は英語です。見出しと目次は日本語です。
A map as SVG text: the sea, every region's land with its tone, the frames of its insets, and optionally the names
and the numbered callouts. A string, so it works on a server, in a build step, in an email or in innerHTML; the
look comes from CHIZU_STYLE (set style: true to carry it inside).
Each region is a <g class="cz-region" data-code="…"> holding a <path class="cz-land"> for each piece (an inset's
region is one piece moved into its box). On a map that wraps, a window that overhangs the cut draws the land again
on the other side.
インポート
import { drawChizu } from "@johnmorrisdotca/chizu/draw";定義
function drawChizu(map: ChizuMap, options?: ChizuDrawOptions): string引数
| 名前 | 型 | 説明 |
|---|---|---|
map | ChizuMap | The native map or map fields required by this signature; coordinates and region codes belong to its canvas. |
options (省略可) | ChizuDrawOptions | The optional native drawing, matching, layout or quiz settings described by this signature. |
戻り値
string
The SVG text of the native map, with the requested layers, tones, labels and callouts.
例
import WORLD from "@johnmorrisdotca/chizu/world";
import { drawChizu } from "@johnmorrisdotca/chizu/draw";
import { focusBox } from "@johnmorrisdotca/chizu";
const svg = drawChizu(WORLD, { box: focusBox(WORLD, ["JP"]), tones: { JP: "selected" }, labels: ["JP"], language: "ja" });
console.log(svg.startsWith("<svg"), svg.includes("<title>日本</title>"));
// true truetrue true出力（このページを作ったときに実行した結果）
この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。