実行環境と動作例

Windows7 32bit + Chrome43、Firefox40で動作確認しました。IE10では、ツリーの配置だけ同じで塗り・線のスタイルが変になって駄目。下が、今回作成したSVGをFirefox、IEで開いた様子。Chromeは先頭に掲げたとおりです。

↓SVGをOBJECTタグ内に配置したもの。IEなどで、上と同じ見苦しい結果になってたらすみません。SVG単体へのリンクはこちら » qexample_binary_tree.svg

ソース

今回はSVG + CSS + JavaScriptの三つ。座標の計算など大半の処理をJavaScriptで行い、あとCSSで可能なスタイルはそちらに外部化。最終的にSVGは、外部ファイル呼び出しだけになりました。
loading from Bitbucket...

SVGのCSSでは図形の大きさ（ノードの円など）を設定できず、こちらに書けるものは少ないです。テキストのみfont-size属性で大きさを設定できますが、多くの場合ノードの円の大きさと連動して調整するので、両方JavaScriptで設定することにしました。
loading from Bitbucket...

JavaScriptはちょっと長め。最初にBinTreeというクラスを定義し、処理を簡単にするためのクラスメソッドを作り、配列（インスタンス作成時に渡される想定）からノード座標を計算。次のdrawNodesというメソッドが描画部分。最後に適当な乱数から配列を作ってテスト。だからロードするたび数値が変わります。
loading from Bitbucket...

今後

昨日の最後に書いた「配列のヒープソート」など、二分木のノード入れ替えの可視化に使えたらいいなぁ。複数の配列をまとめて渡し、アニメーションで、またはインタラクティブに処理過程を遷移させるとか。それにはまずノード入れ替えを実装しないと…。