@yanqirenshi/d3.map.documents

ドキュメントをアイコン + ラベルで地図状に配置して SVG で描画する React コンポーネントです。

まだ簡易な実装です（v0.0.1 相当の機能範囲）。 入力はフラットな配列で、各ドキュメントを座標・アイコン・ラベルで表します。 入れ子や結線はありません。

インストール

npm install @yanqirenshi/d3.map.documents

React 18 / 19 に対応しています（peerDependencies）。

使い方

描画の管理オブジェクト Rectum を作って React コンポーネント D3MapDocuments に渡し、 data() でデータを流し込みます。

import React from 'react';
import D3MapDocuments, { Rectum } from '@yanqirenshi/d3.map.documents';

export default function Map({ data }) {
  const [rectum, setRectum] = React.useState(null);

  React.useEffect(() => {
    setRectum(new Rectum({ transform: { k: 0.8, x: 150, y: 120 } }));   // 初期のズーム / パン
  }, []);

  React.useEffect(() => {
    if (rectum) rectum.data(data);
  }, [rectum, data]);

  if (!rectum) return null;

  return (
    <div style={{ width: '100%', height: '100%' }}>
      <D3MapDocuments rectum={rectum} />
    </div>
  );
}

入力データ

連想配列ではなく、ドキュメントの配列をそのまま渡します。

[
  {
    id: 1,
    url: 'https://example.com/doc-a',
    position: { x: 0, y: 0 },
    icon: { type: 'document', url: '<画像 URL または data URI>', size: { w: 40, h: 40 } },
    label: { text: 'Document A' },
    font: { size: '40px' },
  },
]

ラベルは url へのリンクになります（アイコンの右横に置かれます）。

入力の正規化は行いません。 ペインタが d.icon.size / d.position / d.label.text / d.font.size を直接読むため、icon / position / label / font は省略できません （省略すると描画時に例外になります）。

フィールドの詳細はショーケースの d3.map.documents のページ（「データ」タブ）を参照してください。 サンプルの実データは showcase/src/demos/data/mapdocuments-sample.js です （アイコンは外部 URL に依存しないインライン SVG を data URI で渡しています）。

開発

npm run transpile -w @yanqirenshi/d3.map.documents   # src -> dist（dist はコミット対象）
npm test -w @yanqirenshi/d3.map.documents            # jest

Author

Satoshi Iwasaki ([email protected])

Copyright

Copyright (c) 2018-2026 Satoshi Iwasaki ([email protected])

License

Licensed under the MIT License.