外部ファイルのデータからSVGで棒グラフを描く」の棒は横向きでした。このグラフは縦棒に改め、左側と下側に数値軸および項目軸を加えます。横棒グラフを縦に変える横を縦に変えるには、計算する座標のxをyに改めればよいでしょう。それだけでは足りません。ハンカチの横縞を縦縞に変えるより、もう少し手間がかかります。x座標は左角が0です。したがって、棒は正の向きに伸ばせば済みます。ところが、y座標は上角が0です。下に伸びる棒グラフは普通使われません。そのため、棒の上端を計算して、そこから起点までの棒を描くことになるのです。つぎに、横棒は下に向けてなりゆきで並べるだけでした。数が増えても、スクロールするのは不自然ではありません。縦棒はグラフ領域の幅を決めておかないと見づらいでしょう。棒の幅はデータ数で割り算して求めるのがよさそうです。外部ファイルのデータからSVGで棒グラフを描く」のコード003を、書き替えてゆきましょう。つぎのように、グラフ領域の幅(width)と高さ(height)は予め定めておきます。データの大きさに応じたスケール(y)は、垂直軸にもとづいて計算しなければなりません。対象領域を与えるメソッドとして、continuous.range()に替えてcontinuous.rangeRound()を用いました。数値の丸めができるのですが、今回はとくに差はありません。height);棒の幅(barWidth)は、前述のとおりグラフの幅(width)をデータ数(data.length)で割って求めました。縦棒は水平方向に、棒の幅分ずつ位置をずらして並べます。0)';});});棒(<rect>要素)の上端座標(yプロパティ)は、これも前述のとおり、データの値から計算します。そのうえで、棒の下端までの長さ(heightプロパティ)だけ伸ばして描くということです。数値を示すテキスト(<text>要素)も、棒に応じて位置決めしました。y(d.value);}CSSはつぎのように1か所だけ書き替えます。これで、横棒グラフは縦に切り替わるでしょう。ここまで手直ししたスクリプトを、以下のコード001にまとめました。サンプル001をjsdo.itに掲げておきます(図にリンクが加えてあります)。項目軸のデータを反映させるグラフの領域とデータに合わせた棒の長さは、d3.scaleLinear()メソッドで求められました。グラフの横軸は項目で、数値ではありません。d3.scaleBand()メソッドを使えば、たとえば項目数に応じた棒の幅や項目ごとの位置が求められます。メソッドの使い方は以下のとおりです。continuous.domain()メソッドには、Array.map()メソッドで得た項目名(nameプロパティ)の配列を渡します。すると、band.bandwidth()メソッドで、棒の幅が得られるのです。band.padding()メソッドで棒同士の間に余白を加えました。項目の位置は、translate()関数で決めています。変わったかが確かめられるように、jsdo.itにサンプル002を掲げておきましょう。マージンを加える垂直の数値軸と水平の項目軸を入れる支度として、グラフ領域の四方にマージンを加えます。グラフを描く<svg>要素(class属性"chart")の幅と高さは、属性としてつぎのように定めておきましょう。height="425"></svg>マージンはオブジェクト(margin)にプロパティとして、つぎのように与えておきます。グラフに含める部品が増えますので、<svg>要素に子の<g>要素(elements)をひとつ足し、左上のマージンを加えました。グラフの棒の<rect>要素はその中に含めます。垂直軸にメモリをつけるつもりですので、値のテキスト(<text>要素)は除きましょう。<style>要素も、テキストの定めは要らなくなります。ブラウザの開発ツールで確かめると、<g>要素がひとつ増えているはずです(図001)。数値軸と項目軸を加えるグラフに垂直の数値軸と水平の項目軸を加えましょう。軸をつくるのは、それぞれd3.axisLeft()とd3.axisBottom()メソッドです。つぎのように、election.call()メソッドで選択に対して呼び出し、引数にはscale関数を渡します。加えた<g>要素にはクラス(axisとaxis--xおよびaxis--y)を与えてください。CSSにひとつ定めを書き足します。none;}数値軸と項目軸を加えた棒グラフのスクリプトは、つぎのコード002にまとめたとおりです。併せて、このコードは以下のサンプル003としてjsdo.itに掲げました。