D3.js サンプル orgoShmorgo を読んでソーシャルグラフを考えるの巻き – その参

Pocket

さて、、3夜目にはいりました。初回、前回に続き、orgoShmorgoのサンプルコードを読みながら、解析していきます。

前回、tickが何者かというところで力尽きたのですが、こちら「【D3.js】ノードをドラッグできる静的なForceレイアウト」で解説されていました。
というか、すっごくシンプルな例が挙げられています。
もう、解析の必要がない気がする・・・けど、頑張ろう。

とにかく、上述のページを見るとtickは、アニメーションに関わるものだということがわかりました。これはもう、先に進みます。

link.enter().insert(“g”, “.node”)が何者か


      // Create new links
      link.enter().insert("g", ".node")
          .attr("class", "link")
          .each(function(d) {
            // Add bond line
            d3.select(this)
                .append("line")
                        .style("stroke-width", function(d) { return (d.bondType * 3 - 2) * 2 + "px"; });

                    // If double add second line
                    d3.select(this)
                        .filter(function(d) { return d.bondType >= 2; }).append("line")
                        .style("stroke-width", function(d) { return (d.bondType * 2 - 2) * 2 + "px"; })
                        .attr("class", "double");

                    d3.select(this)
                        .filter(function(d) { return d.bondType === 3; }).append("line")
                        .attr("class", "triple");

                    // Give bond the power to be selected
                    d3.select(this)
                        .on("click", bondClicked);
          }); 

      // Delete removed links
      link.exit().remove(); 

さて、こいつの読み取りです。

link.enter().insert(“g”, “.node”)

なんだろう、これ。link.enter()は開いている仮想の要素部分に入れるものだったような。ドットインストールをもう一度見た方がいいかしら。

さて、insert(“g”, “.node”) が何者かなんですよねー。gはおそらくsvg要素のg。.nodeは、<g transform=”translate(n.n,n.n)” class=”node”>のnodeに関係あるのかどうか。。

google検索してもいまいちだったので、リファレンスを覗きに行きました。

# selection.insert(name[, before])

ん?beforeってなんだ。

Inserts a new element with the specified name before the element matching the specified before selector.

あ、なるほど、@class=’node’の要素の前にgを入れるっちゅうことか。

これは、<g class=”node”>の以前に、<g>をinsertしているっていうことかな。

確かに、<g class=”node”>の前に、<g class=”link”>が並んでいましたっけ。なるほど。

 

.each(function(d) { でeachされるもの

で、

 .attr("class", "link")

はまんま、<g class=”link”>をつくっているわけで、次はeachです。

ここの(d)に渡されるのは、linkデータですね。それでデータごとに、何やら描画していると。

            d3.select(this)
                .append("line")
                        .style("stroke-width", function(d) { return (d.bondType * 3 - 2) * 2 + "px"; });

ここでまず、<g class=”link”>の中に、line要素を追加していると。で、styleでstroke-widthを設定していると。

で、追いきれていないのですが、bondtypeというのが、このサンプルの中で分子の結合度なのか結合数を表しているint型だと思われます。
lineに関してはかならず1本あるので、まず追加すると。

そして、次に

                    d3.select(this)
                        .filter(function(d) { return d.bondType >= 2; }).append("line")

または

                    d3.select(this)
                        .filter(function(d) { return d.bondType === 3; }).append("line")

というselection.filterという記述です。

# selection.filter(selector)

リファレンス見ると、なんとなく想像が付きます。jQueryでいうところのfindに似ていますかね。
returnに式を含める事で、単純に要素だけではなくて、条件式の判定に寄って値を返すみたいな使い方もできるし、このorgoShmorgoサンプルではうまく使っていますね。

For example, to select every element with an odd index (relative to the zero-based index):

var odds = selection.select(function(d, i) { return i & 1 ? this : null; });

Equivalently, using a filter function:

var odds = selection.filter(function(d, i) { return i & 1; });

Or a filter selector (noting that the :nth-child pseudo-class is a one-based index rather than a zero-based index):

var odds = selection.filter(":nth-child(even)");

 

サンプルでは、bondTypeが2以上なら、<line class=”double”>をついかしえ、更にbondTypeが3なら、<line class=”triple”>の<g class=”link”>の子要素として追加しているということですね。

なるほど。だいぶわかってきた。つぎ、node行ってみよう。

		  // Update node data
	  	node = node.data(nodes, function (d) {return d.id; });

	    // Create new nodes
		  node.enter().append("g")
		      .attr("class", "node")
		      .each(function(d) {
		      	// Add node circle
			      d3.select(this)
			      	.append("circle")
		      		.attr("r", function(d) { return radius(d.size); })
		      		.style("fill", function(d) { return color(d.symbol); });

		        // Add atom symbol
			      d3.select(this)
			      	.append("text")
							.attr("dy", ".35em")
							.attr("text-anchor", "middle")
							.text(function(d) { return d.symbol; });

						// Give atom the power to be selected
						d3.select(this)
							.on("click", atomClicked);

						// Grant atom the power of gravity
						d3.select(this)
							.call(force.drag);
			    });

		  // Delete removed nodes
	    node.exit().remove();

		  force.start();

もう、なんか調べなくても、だいたいわかっちゃった気になります。
<g class=”node”>という要素の子要素として、circleとtextを追加していますね。

force.start();

だけ重要ですね。

というわけで、中心的な処理はわかってきましたが、そもそものatomDBからnodelist,linklistを動的に生成していると思うのですが、その部分の処理が見えないので、次は最終、その処理だけ追って行きたいと思います。

 

D3.js サンプル orgoShmorgo を読んでソーシャルグラフを考えるの巻き – その四 へ続く

 

 

 

Pocket