5

D3.js を使用して、古典的な人口ピラミッドを作成する必要があります。この画像に似たもの： ここに画像の説明を入力

本当に良さそうな例をいくつか見つけました ( thisとthis ) が、探しているよりも複雑です。私が見ることができる良い単純な例を知っている人はいますか? これを始めるためのアドバイスはありますか？性別グループごとに 1 つずつ、2 つの棒グラフを並べて作成するだけでよいでしょうか?

4

1 に答える 1

23

このようなビジュアライゼーションを作成するための鍵は、何かを描画する前に、事前に十分な時間をかけてレイアウトを設定することです。

グラフのスケールと軸を作成するときに、生活をより簡単にするために使用したい重要な測定値がいくつかあります。次に、<g>チャートの各「セクション」でローカル座標で作業できるように、翻訳付きの要素を利用できます。

目標は、次のように 2 つのミラー領域を作成することです。

2 つのミラー領域

これにより、2 つの領域間で x 次元と y 次元の同じ縮尺を共有できます。

これらの領域を定義するには、まず SVG の内側の余白にいくつかの値を設定してから、それらの余白の内側に収まるようにグループを作成します。これは d3 ビジュアライゼーションの一般的な方法であり、まだ慣れていない場合は、学習する良い機会です。通常は次のようになります。

var width = 400,
    height = 300;

var margin = {
  top: 20,
  right: 10
  bottom: 40,
  left: 10
};

var svg = d3.select('body').append('svg')
  .attr('width', margin.left + width + margin.right)
  .attr('height', margin.top + height + margin.bottom)
  .append('g')
    .attr('class', 'inner-region')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

ビジュアライゼーション自体の一部を配置するときに、そのスペースを考慮する必要なく、軸の目盛り、ラベル、およびタイトル用に SVG ドキュメントに余裕を残すことができるため、これに従うことをお勧めします。その後、さらにスペースが必要になった場合は、ダイアグラム全体を再配置するのではなく、コードの上部にある 1 つの値を調整するだけで済みます。

重要な他のポイントは、2 つの y 軸の x 座標です。言い換えれば、男性と女性の人口がゼロになる点です (以下の赤い線で示されています)。これらは、内側の領域の中心線から設定された距離になります (下の青い線で示されています)。

中間マージン

この値を参照するために、前に作成した margin オブジェクトに middle margin プロパティを追加できます。

margin.middle = 28;

上記の 2 つの赤い線の位置を格納する変数を作成する必要があります。ここでは、それらをpointA(男性人口のゼロ ラインの x 座標) およびpointB(女性人口の対応する点) と呼びましょう。

var regionWidth = (width/2) - margin.middle;

var pointA = regionWidth,
    pointB = width - regionWidth;

これらのポイントを設定すると、これらの値を svg 変換にプラグインして、作成したオブジェクトをそれらの位置に変換するだけで済むため、作業ははるかに簡単になります。

最も扱いにくい部分は、ラベルの 1 つのセットを共有する 2 つの中心の y 軸です。このためには、 がどのようd3.svg.axis()にテキスト ラベルを作成し、どのプロパティを操作できるかをよく理解する必要があります。これには、知っておくべき 4 つの重要なプロパティがあります。

  1. axis.orient(direction)軸から出てくる目盛りが指す方向を指定します。この場合、目盛りを中心に向けたいので、少し混乱します。左軸には が.orient('right')、右軸には.orient('left')

  2. axis.tickSize(inner,outer)軸から出る目盛りの長さ (svg 単位) を設定します。「外側」のマークは軸の端点にあるもので、0この場合は範囲​​バンドを持つ序数スケールを使用しているため、端点は値を表さないため、に設定できます。使用するこの例では、内側の目盛りに小さい値を選択します4。

  3. axis.tickPadding(padding)ラベル テキストのテキスト アンカーが配置される目盛りの端からの距離を設定します。テキスト アンカーを画像の中央、2 つの軸のちょうど中間に配置します。中間マージン (中心線から各軸までの距離) とtickSize(目盛りの長さ) がわかっているので、これら 2 つの値の差をとることで、これらを中央に配置できます.tickPadding(margin.middle - 4)。

  4. axis.tickFormat(format)目盛りラベルの形式を指定します。空の文字列に設定して、軸の 1 つから目盛りラベルを削除して、重複が発生しないようにすることができます。.tickFormat('')

したがって、2 つの y 軸は次のように定義できます。

var yAxisLeft = d3.svg.axis()
  .scale(yScale)
  .orient('right')
  .tickSize(4,0)
  .tickPadding(margin.middle - 4);

var yAxisRight = d3.svg.axis()
  .scale(yScale)
  .orient('left')
  .tickSize(4,0)
  .tickFormat('');

次に、実際に左の y 軸を描画するときに、その<text>要素を選択し、text-anchor を に設定してmiddle、それらがアンカーを中心に配置されるようにします。

.call(yAxisLeft)
  .selectAll('text')
  .style('text-anchor', 'middle');

HEREは、いくつかの不自然なデータを使用したグラフ全体の簡単な例です。簡単に理解できるように、できるだけ多くの一般的な構造についてコメントするようにしました。translation(x,y)また、文字列連結を使用する場合よりも、各翻訳の x 座標と y 座標を見つけやすくする関数も作成しましたその定義は、スクリプトの下部にあります。

詳細についてご不明な点がございましたら、お気軽にお問い合わせください。

于 2014-07-31T04:15:35.083 に答える