Cytoscape.jsでdocument.getElementById('cy'),のみでグラフが描画されるのはなぜ？

Question

背景
Cytoscape.jsでグラフを表示する際、以下の手順を踏むと思います。

①HTML内にdivタグでid="cy"を埋めこみます。

②スクリプトにて、
document.getElementById('cy')
でオブジェクトを取得します。

③スクリプトにて、
表示するノードやスタイルの情報をJSON形式で(？)記述します。

聞きたいこと
オブジェクトを取得するまではいいのですが、なぜノードやスタイルの情報を記述するだけでグラフが生成されるのでしょうか。
オブジェクトを取得した後、オブジェクトに対してなんらかの処理を行うのが一般的なJSの使い方ではないのでしょうか…？

ノードやスタイルの情報を変数に格納し、それを引数としてメソッドに渡すことでグラフが描画される…ということであればイメージがつきます。しかし、Cytoscape.jsではそのようなコードが見当たりません。

なぜ取得したオブジェクトに対して処理を行っていなくともびょがなされるのか、ご教授のほど宜しくお願いいたします。

参考サイト
https://qiita.com/Wangxinyin/items/6965abdd369736e4073f

参考コード
var cy = cytoscape({
container: document.getElementById('cy'),
elements: elements,
style: style,
layout: layout,
});
});

Answer 1

聞きたいこと

オープン・ソース・ソフトウェアなので、ソースコードに全ての答えが詰まっているはずです。
大掛かりなので、すべてをコードリーディングしたわけではありませんが、
公開されたソースのimdex.js　L8 から追いかけると実装が分かりそうだと感じました。

なぜノードやスタイルの情報を記述するだけでグラフが生成されるのでしょうか。

グラフ描画を自動化する目的で「そのように実装されている」からだと思います。

オブジェクトを取得した後、オブジェクトに対してなんらかの処理を行うのが一般的なJSの使い方ではないのでしょうか…？

このライブラリも一般的な使い方をしています。
APIが公開されており、イベントを定義できるとドキュメントに書いています。

ノードやスタイルの情報を変数に格納し、それを引数としてメソッドに渡すことでグラフが描画される…ということであればイメージがつきます。しかし、Cytoscape.jsではそのようなコードが見当たりません。

冒頭にリンクしましたので参考にしてください。

なぜ取得したオブジェクトに対して処理を行っていなくともびょがなされるのか

取得したオブジェクトに対して内部処理しているからです（一般的な使い方として）。

---

ソースコードを全て読めなくても、使ってもらえるようにドキュメントが用意されています。

1. 疑問に感じたら、ドキュメントを翻訳してでも「読む」
2. ソースコードを読んで、「具体的な処理を理解する」

このような手順を踏むと、自己理解できるのが、オープン・ソース・ソフトウェアの特徴です。

1. 自分で調べ、
2. 自分で知り、
3. ライセンスを含めて納得できるなら使う。

という習慣がありますので、それに倣ってください。

Answer 2

よくみたら普通に引数ありの関数でした。
自己解決です。ありがとうございました。