基礎編 Hello World

記事作成日: 2020-12-14

公式のサンプルをできる限り削って最も単純なHello Worldを書いてみました。長方形の中にHello Worldと書かれた図形が1つ表示されるだけのものです

図.画像:

公式のHello Worldはこちら。

ソースコード

<html>
<head>
	<title>Hello World</title>

	<script type="text/javascript">
		mxBasePath = './src';
	</script>

	<script type="text/javascript" src="./src/js/mxClient.js"></script>

	<script type="text/javascript">

		function main(container_dom){
			
			var graph = new mxGraph(container_dom); // 2.
			var parent = graph.getDefaultParent(); // 3.
			var v1 = graph.insertVertex(parent, null, 'Hello World', 20, 20, 80, 30); // 4.

		};
		window.onload = function () { // 1.
			main(document.getElementById('graphContainer'))
		};
	</script>
</head>

<body>
	<div id="graphContainer"></div>
</body>
</html>

説明

  1. Webページのロードが完了するとmain()が実行されます。main()にはグラフの表示場所となるHtmlのDomノードを引数として渡します。
  2. mxGraphクラスを使ってグラフを実装します。
  3. 図形の挿入先となる親を指定します。graph.getDefaultParent();
  4. insertVertex()で図形を挿入します。graph.insertVertex(parent, null, 'Hello World', 20, 20, 80, 30);

ちなみに、このソースコードを実行し、インスペクターで見ると以下のようなsvgに変換されました。コンテナノードの中にSVGが追加されています｡

<div id="graphContainer" style="position: relative; touch-action: none;">

<svg style="left: 0px; top: 0px; width: 100%; height: 100%; display: block; min-width: 101px; min-height: 51px;">
	<g>
		<g></g>
		<g>
			<g style="visibility: visible;" transform="translate(0.5,0.5)">
				<rect x="20" y="20" width="80" height="30" fill="#c3d9ff" stroke="#6482b9" pointer-events="all"></rect>
			</g>
			<g style="">
				<g fill="#774400" font-family="Arial,Helvetica" text-anchor="middle" font-size="11px">
					<text x="60" y="39.5">Hello World</text>
				</g>
			</g>
		</g>
		<g></g>
		<g></g>
	</g>
</svg>

</div>