|
上図のチャートを表示するための、両者のコードを比較してみましょう。
（TeeChart の例では、より少ないコードで、D3 の例と比べてもすでにより豊かな表示を実現できています。） |
|
| 《 D3.js ｠ | 《 TeeChart JavaScript ｠ |
|
// 2. マージンを設定 var margin = {top: 50, right: 50, bottom: 50, left: 50} , width = window.innerWidth - margin.left - margin.right // window の width を使用 , height = window.innerHeight - margin.top - margin.bottom; // window の height を使用 // データポイントの数 var n = 21; // 5. X スケールはデータの index を使用 var xScale = d3.scaleLinear() .domain([0, n-1]) // input .range([0, width]); // output // 6. Y スケールはランダム値を使用 var yScale = d3.scaleLinear() .domain([0, 10]) // input .range([height, 0]); // output // 7. d3 の line ジェネレータ var line = d3.line() .x(function(d, i) { return xScale(i); }) // line ジェネレータの x 値を設定 .y(function(d) { return yScale(d.y); }) // line ジェネレータの y 値を設定 // 8. 長さNのオブジェクトの配列。各オブジェクトはキー -> 値のペアを持ち、キーは「y」で、値は乱数 var dataset = d3.range(n).map(function(d) { return {"y": d3.randomUniform(10)() } }) // 1. SVG をページに追加し、 #2 のコードを使用 var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // 3. グループタグの x 軸を呼ぶ svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(xScale)); // d3.axisBottom で軸コンポーネントを作成 // 4. グループタグの y 軸を呼ぶ svg.append("g") .attr("class", "y axis") .call(d3.axisLeft(yScale)); // d3.axisLeft で軸コンポーネントを作成 // 9. path を追加, データバインド, line ジェネレータのコール svg.append("path") .datum(dataset) // 10. line にデータをバインド .attr("class", "line") // スタイリングの class をアサイン .attr("d", line); // 11. line ジェネレータのコール // 12. 各データポイントに四角形を追加 svg.selectAll(".dot") .data(dataset) .enter().append("rect") // enter().append() メソッドを使用 .attr("class", "dot") // スタイリングの class をアサイン .attr("x", function (d, i) { return xScale(i) - 6 }) .attr("y", function (d) { return yScale(d.y) - 6 }) .attr("width", 12) .attr("height", 12) </script> |
<script type="text/javascript"> var Chart1; function draw() { // chart canvas を追加 Chart1 = new Tee.Chart("canvas"); //チャートに line series を追加 var series = new Tee.Line(Chart1); Chart1.addSeries(series); //20個のランダム・データポイントを生成 var v = new Array(20); for (var t = 0; t < v.length; t++) v[t] = Math.random() * 10; //データを設定 series.data.values = v; //data points visible を設定 Chart1.series.items[0].pointer.visible = true; //chart タイトルを設定 Chart1.title.text = "Line"; //chart テーマを設定 changeTheme(Chart1, "minimal"); //凡例を表示 Chart1.legend.visible = true; Chart1.draw(); } </script> |
|
また、D3では非常に困難な、チャートに関する様々な処理が TeeChart JavaScript を使用して作成したチャートではとても容易に実現できます。
以下は、その一例です。 ◆ ズームイン： マウスの左ボタンを押し右下にドラッグします。 ◆ ズームアウト： マウスの左ボタンを押し左上にドラッグします。 ◆ スクロール： マウスの右ボタンを押してグラフをドラッグします。 ◆ タイトルを表示する：タイトルプロパティを設定するだけです。 Chart1.title.text = "Line"; ◆ ポインターを表示する：Pointer.Visible プロジェクトを Trueに設定するだけです。 Chart1.series.items[0].pointer.visible = true; これは D3 では、以下のコード例のように正確な位置に正方形を描画しなければなりません。
// 12.各データポイントに四角形を追加
svg.selectAll(".dot") .data(dataset) .enter().append("rect") // enter().append() メソッドを使用 .attr("class", "dot") //スタイリングの class をアサイン .attr("x", function (d, i) { return xScale(i) - 6 }) .attr("y", function (d) { return yScale(d.y) - 6 }) .attr("width", 12) .attr("height", 12) ◆ 凡例を表示する：legend.visible プロパティを True に設定するだけです。 Chart1.legend.visible = true; D3 でこれを実現するには、非常に多くのコードを描く必要があります。 また、例えば Line チャートから散布図に書き換えるには、D3 ではほとんどのコードを書き直す必要がありますが、TeeChart JavaScript では series のタイプを変更するだけです。 var series = new Tee.PointXY(Chart1); |
|