D3.js を使用したテーブルの作成方法の紹介

D3 は現在最も人気のある JavaScript 視覚化チャート ライブラリの 1 つであり、幅広いチャート タイプがあり、SVG 形式をサポートしているため、MetricsGraphics など、D3 に基づいて開発された多くのチャート プラグインも広く使用されています。 js、D3 Chart 上に構築されたデータは非常に強力です。

D3 は、データ視覚化のための Javascript ライブラリです。 SVG、キャンバス、HTML を使用します。強力な視覚化技術と、DOM 操作へのデータ駆動型アプローチを組み合わせます。

D3 と JQuery の違い D3 はデータ駆動型ですが、JQuery はそうではありません。要素を直接操作するために JQuery を使用しますが、D3 を使用する場合は、D3 独自の data()、enter()、exit を通じてデータを提供する必要があります。 () メソッドのコールバックが実行され、D3 が要素に対して操作を行います。 D3 はデータ視覚化によく使用され、JQuery は Web アプリケーションの作成に使用されます。 D3 には多くのデータ視覚化拡張機能があり、JQuery には多くの Web アプリケーション プラグインがあります。どちらも、CSS セレクターと流暢な API を提供する Javascript DOM 操作ライブラリです。

D3 と JQuery の違いは何ですか?

最も一般的に使用されるメソッド

d3.select(selector): セレクターに一致する最初の要素を選択します。一致する要素がない場合は、空の選択を返します (ただし、null または未定義ではありません)。

d3.selectAll(selector): select() とは異なり、一致するすべての要素が選択されます。

selection.append(type): 指定されたタイプが文字列の場合、このタイプ (タグ名) を新しい要素として、選択された各要素の最後の子要素に追加します。

selection.attr(name, [value]): 値が決定したら、選択範囲内の name という名前の属性値を value に設定します。 value には定数またはメソッドを指定できます。 value が指定されていない場合は、選択範囲内の最初の空でない要素の name 属性の現在の値を返します。

selection.data([data[,key]]): データと要素をバインドし、新しい選択範囲を返します。

selection.enter(): 選択範囲を返します。このとき、DOM 要素は対応するデータよりも少なくなります。欠落している DOM 要素を追加するために使用されます。例:

var p = d3.select("body")
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
  .enter().append("p")
  .text(function(d) { return d; });

本文が空の場合、上記のコードはデータに基づいて新しい p 要素を作成し、それを本文要素に追加し、テキストの内容を対応する数値に設定します。ページの結果は次のとおりです:

 <p>4</p>
 <p>8</p>
 <p>15</p>
 <p>16</p>
 <p>23</p>
 <p>42</p>

selection.exit(): 終了選択を返します。このとき、対応するデータよりも DOM 要素の数が多くなります。冗長な DOM 要素を削除するために使用されます。たとえば、上記の例に基づいて、データを更新したいとします:

p = p.data([1, 2, 4, 8, 16, 32], function(d) { return d; } ); code><p><code>p = p.data([1, 2, 4, 8, 16, 32], function(d) { return d; });

因为此时指定了key方法（用于指定数据和元素匹配的顺序等），并且数据[4,8,16]匹配已经存在的元素，所以update selection只包含3个p元素。我们可以使用enter selection添加3个新元素：

p.enter().append("p").text(function(d) { return d; });

然后，还需要移除不需要的元素[15, 23, 42]：

p.exit().remove(); このときキーメソッドが指定されており（データと要素の一致順序の指定などに使用されます）、データ[4,8,16]が既存の要素と一致するため、更新選択が行われます。 3 p 要素のみが含まれます。 Enter select を使用して 3 つの新しい要素を追加できます:

p.enter().append("p").text(function(d) { return d; });

その後、不要です要素も削除する必要があります [15, 23, 42]:

p.exit().remove();
ページの結果:

 <p>1</p>
 <p>2</p>
 <p>4</p>
 <p>8</p>
 <p>16</p>
 <p>32</p>

ヒストグラムを作成します

棒グラフの例

D3を使用する場合、SVGの構造を理解する必要があります。どのようなグラフィックを描画するか、どのラベルを使用する必要があるか、ラベルに対してどのような属性を定義する必要があるか。

たとえば、主にXY座標軸と列のヒストグラムを作成します。 XY 軸は、直線を描画するために線ラベルを使用し、スケールのテキストを表示するためにテキスト ラベルを使用します。列は、rect タグを使用して四角形を描画します。角が丸い四角形が必要な場合は、rect タグの rx または ry 属性を設定します。四角形の位置を定義したい場合は、x を設定する必要があります。や y 属性など。このようにパーツを組み合わせて絵を作ります。 以下の内容は D3 3.x の API に基づいており、一部のインターフェイスは D3 4.0 とは異なります。
D3 3.x API リファレンス

D3 4.0 API リファレンス

ルートの svg

D3 描画では、まず svg 要素を作成し、幅や高さなどの属性を定義する必要があります:

var svg = d3.select(id).append("svg")
  .attr('class', 'svg_timeline')
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom);

座標軸

座標軸を使用するには、まず D3 スケールを使用する必要があります。メソッド axis.scale([scale]) を使用して、座標軸のスケールを設定するか、現在のスケールを返します。スケールは次のように分類されます:

定量的スケール: 数値などの連続データ。時間スケール: データは時間です。順序スケール: 名前、カテゴリなどの離散データ。

たとえば、時間スケールの X 軸と数値スケールの Y 軸を作成したい場合、時間スケールと定量スケール、より具体的には線形スケールを使用できます。

d3.scale.linear(): 線形スケールを作成します。 d3.time.scale(): タイムスケールを作成します。目盛りと目盛りの形式は現地時間に設定されます。

スケールを決定したら、入力ドメインと出力範囲も設定する必要があります。たとえば、X 軸のスケールは次のようになります。 🎜

var x = d3.time.scale()
  .range([0, 坐标轴的宽度])
  .domain(最小日期, 最大日期);

🎜 最小日付と最大日付は両方とも Date オブジェクトです。次に、X 座標軸のスケールを設定して作成します。 🎜

//生成x坐标轴
var xAxis = d3.svg.axis()    //新建一个默认的坐标轴
  .scale(x)    //设置比例尺
  .ticks(d3.time.day, 1)   //指定刻度生成的方式
  .tickFormat(function(d){  //自定义刻度文字格式
    var month = d.getMonth() + 1;
    return month+'月'+ d.getDate() +'日';
  })
  .tickPadding([15]) //坐标轴线与文字之间的距离
  .tickSize(-height)
  .orient("bottom"); //位置

🎜ticks のパラメーターのタイプは、対応するスケールのタイプによって異なります。ここで渡されるパラメーターは時間間隔であり、スケールが 1 日であることを意味します。 🎜tickFormat を使用すると、目盛りのテキスト形式をカスタマイズできます。 🎜

值得一说的是，如果数据中对应X轴的数据是字符串，比如‘2017-08-12'。那绑定到页面上的数据是需要被处理的。D3提供解析日期的接口以及日期格式化的接口。

format.parse(string)：把一个字符串string解析为一个日期。 d3.time.format(specifier)：根据给定的specifier创建一个当地时间格式化。

比如：

var parseDate = d3.time.format("%Y-%m-%d").parse; //时间解析器
var date = parseDate('2017-08-12'); //将字符串解析成日期

最后，在svg元素中添加坐标轴：

//添加X轴元素
svg.append("g")
  .attr("class", "axis x")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

selection.call(function[, arguments…])方法调用指定的方法一次，并把selection跟随参数一起传递到方法中。

柱状图中的长方形
具体步骤：将数据跟页面元素绑定，并创建所需要的页面元素，具体设置每个页面元素的样式位置，以及事件监听等。

//添加条形的元素
var bars = svg.selectAll(".barRect")
  .data(ddata)  //绑定数据
  .enter().append("g")  //创建缺少的页面元素
  .attr('class', 'barRect')
  .attr("id", function(d, i) {
    return "barRect-" + i;
  });          

//定义矩形的位置
//x为矩形最左端的位置
//y为矩形最顶端的位置
bars.append("rect")
  .attr('class','bar-rect')
  .attr("width",16)  //长方形的宽度
  .attr("y", function(d) {
    return y(d.value);   //使用比例尺确定坐标Y值
  })
  .attr("x", function(d) {
    return x(d.date) - 8;  //使用比例尺确定坐标X值
  })
  .attr("height", function(d) {  //条形的高度
    return height - y(d.value);
  })
  .attr('rx',10) //圆角
  .attr('ry',10) //圆角
  .attr('fill','url(#linear-gradient)'); //填充渐变色

以上がD3.js を使用したテーブルの作成方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。