D3.jsを使用して、シンプルなラインとバーチャートを作成します

この記事は、データ視覚化のためのJavaScriptライブラリであるD3.JSを使用して、バブルチャートに関する以前のチュートリアルに基づいています。 次に、HTML、SVG、およびCSSを活用して、D3.JSを使用したラインチャートとバーチャートの作成を検討します。 前の記事に精通していることをお勧めします。 重要なポイントには、インタラクティブな視覚化におけるD3.JSの役割、ラインチャートの作成（スケール、軸、ラインジェネレーター）、バーチャート構造（順序スケール、長方形）、およびインタラクティブ性（ツールチップ、イベントハンドラー、トランジションによるユーザーエクスペリエンスの強化が含まれます。 ）。 軸のスケーリングやスタイリングなどのカスタマイズオプションも強調表示されます。

ラインチャート：ステップバイステップガイド

私たちの例では、次のデータセットを使用しています

およびsvg要素：

var lineData = [{x: 1, y: 5}, {x: 20, y: 20}, {x: 40, y: 10}, {x: 60, y: 40}, {x: 80, y: 5}, {x: 100, y: 60}];

スケール、軸、およびマージンを定義します

<svg id="visualisation" width="1000" height="500"></svg>

次に、ラインジェネレーター関数が作成されます：

var vis = d3.select('#visualisation'),
    WIDTH = 1000,
    HEIGHT = 500,
    MARGINS = {top: 20, right: 20, bottom: 20, left: 50},
    xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function(d) { return d.x; }), d3.max(lineData, function(d) { return d.x; })]),
    yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function(d) { return d.y; }), d3.max(lineData, function(d) { return d.y; })]),
    xAxis = d3.svg.axis().scale(xRange).tickSize(5).tickSubdivide(true),
    yAxis = d3.svg.axis().scale(yRange).tickSize(5).orient('left').tickSubdivide(true);

vis.append('svg:g').attr('class', 'x axis').attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')').call(xAxis);
vis.append('svg:g').attr('class', 'y axis').attr('transform', 'translate(' + (MARGINS.left) + ',0)').call(yAxis);

最後に、行はsvgに追加されます：

var lineFunc = d3.svg.line()
  .x(function(d) { return xRange(d.x); })
  .y(function(d) { return yRange(d.y); })
  .interpolate('linear');

バーチャート：基礎の上に構築

vis.append('svg:path')
  .attr('d', lineFunc(lineData))
  .attr('stroke', 'blue')
  .attr('stroke-width', 2)
  .attr('fill', 'none');

バーチャートの場合、軸の作成を再利用しますが、スケールを変更して長方形を追加します。 この強化された例には、インタラクティブのためのマウスオーバーおよびマウスアウトイベントハンドラーが含まれます。 D3.JSでは、さらにカスタマイズと高度な手法が可能であり、高度にカスタマイズされた動的なデータの視覚化を可能にします。 提供されたFAQSセクションでは、ラベル、ツールチップ、応答性、アニメーション、ソート、タイトル、凡例、欠落データの処理に関するさらなるガイダンスを提供します。

以上がD3.jsを使用して、シンプルなラインとバーチャートを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。