【JavaScript】画面の座標に関するものCSSだけで吹き出しをつくる

仕事で、吹き出し用の部品を作らなければならなくなったので、実装方法しらべてみました。 以下の参考URLが分かりやすかったので、これを参考にしたら対応できました。

 【参考URL】

 https://pico-cre.com/wp-memo/post-4925/ 

 https://blog.codecamp.jp/css_balloon

【TypeScript】TypeScript開発トラブルでの対応

TypeScriptでの開発で発生したエラーについて、すこしづつまとめていきます。
エラー発生時に、見直すことで、開発効率を上げていこうと思っています。

● Microsoft JScript 実行時エラー: 'jQuery' は宣言されていません。
【原因】Typescriptファイル内で、jQueryを利用しているのに読み込み宣言をしてないだけです。
【対策】HTMLファイルにjquery読み込みを追加する。
　<script type="text/javascript" src="../../Scripts/jquery-1.6.4.min.js"></script>
 【参考URL】
　　http://tra-tech.blogspot.jp/2011/11/microsoft-jscript-jquery.html

【TypeScript/JavaScript】d3.jsでグラフを作ろう（棒グラフ）

TypeScript及びJavaScriptを使って、グラフ作成する方法で、d3.jsを使う方法があります。
前回に続いて、棒グラフのつくり方を纏めてみました。

(1)データ
キー（label/value)と値(labelに対する値/valueに対する値)に値を設定したJsonデータを作成します。

            var res = [
                { label: "利益", value:  7943546 }
                , { label: "損失", value: 19508020 }
            ];


(2)線データ（ステップライン）の作成
idは、HTMLファイルdivタグ要素とします。
idにｓｖｇ要素を追加します。
widthは幅、marginは余白、heightは高さを表します。
svg要素を作成して、g要素を追加します。

                var svg = d3.select(id).append("svg")
                    .attr({
                        width: width,
                        height: height
                    })
                    .append("g")
                    .attr("transform", "translate(" + 200 + "," + 100 + ")");
taransformは位置を指定します。

棒(四角=rect)を定義します。
rectにクラス定義(bar)をして、CSSで色など属性を与えます。
               var rec = this.svg.selectAll(".bar")
                    .data(data)
                    .enter().append("rect")
                    .attr("class", "bar")
                    .attr("x", function (d) { return x(d.label); })
                    .attr("width", x.rangeBand())
                    .attr("style", "fill:" + barcolor)
                    .attr("style", "stroke:black")
                    .attr("y", function (d) { return height; })
                    .attr("height", function (d) {
                        return height - y(d.value);
                    })
                    .append("title")
                    .text(function (d) { return d.value.toLocaleString(); })
                    ;
                this.svg.selectAll("rect").attr("height", 0);


svg要素に棒グラフアニメーション(下から上に伸びる）定義します。
2秒間アニメーションを設定します。(transiton,durationを使用する)
                this.svg.selectAll("rect")
                    .transition().duration(2000)
                    .delay(function (d, i) {
                        return i * 300;
                    })
                    .attr("y", function (d) {
                        return y(d.value);
                    })
                    .attr("height", function (d) {
                        return height - y(d.value);
                    });

(2) 軸
d3.scale.ordinal()　・・・domain の配列の n 番目の値が、 range の配列の n 番目の値に対応
  ※こちらのサイトを一読すると理解しやすいです。
　　http://blog.livedoor.jp/kamikaze_cyclone/archives/34197135.html
d3.scale.linear()　・・・　リニアスケールを設定
を使って、スケール定義します。

スケール定義することで、height/width内にデータが収まるように、スケールできるようになります。
            var x = d3.scale.ordinal().rangeRoundBands([0, width], 0.3);
            var y = d3.scale.linear().range([height, 0]);

 d3.svg.axis()を使って、軸を作成して、スケールとリンクさせます。
ticksで刻みも定義します。

            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom");
            var yAxis = d3.svg.axis()
                .ticks(5) // 軸のチックの数。
                .scale(y)
                .orient("left"); 

x,yの範囲を定義します。

           x.domain(data.map(function (d) { return d.label; }));
            var dmax = d3.max(data, function (d) { return d.value; });
            var no = String(dmax).length;
            var unit = Math.pow(10, no - 1);
            var res = Math.floor(dmax / unit);
            dmax = (res + 1) * unit;
            y.domain([0, dmax]);
            y.range([height, 0]);

X軸、y軸を追加します。
 classはaxisにして、CSSファイルに軸の属性定義を行います。
            this.svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);
            this.svg.append("g")
                .attr("class", "axis")
                .call(yAxis);

横方向のグリッド間隔を自動生成します。
attrにて、属性定義を行います。
            var ts = height / (res + 1);
            var rangeY = d3.range(0, height, ts);
            this.svg.selectAll("line.y")
                .data(rangeY)
                .enter()
                .append("line")
                .attr("x1", 0).attr("y1", function (d, i) {
                    return d;
                })
                .attr("x2", width).attr("y2", function (d, i) { return d; });

            this.svg.selectAll("line")
                .attr("stroke", "black")
                .attr("stroke-width", 1)
                .attr("stroke-dasharray", "1, 3")
                .attr("shape-rendering", "crispEdges");

(4) 情報表示 
値棒グラフ上表示します。
クラスはbarvalとして、属性をCSSファイルで定義します。

            this.svg.selectAll(".barval")
                .data(data)
                .enter().append("text")
                .attr("class", "barval")
                .attr("x", function (d) {
                    return x(d.label) + 5;
                })
                .attr("y", function (d) {
                    return y(d.value) - 2;
                })
                .text(function (d) {
                    return d.value.toLocaleString();
                });



on("mouseover")で、円弧をbrawon色にして、infoクラス定義したg要素を表示させて、
そのg要素に情報表示させます。

on("mouseout")で色をbarcolorで定義した色に戻します。
            this.svg.selectAll("rect")
                .on("mouseover", function (d, i) {
                    d3.select(this).attr("style", "cursor:pointer");
                    d3.select(this).attr("style", "fill:brown");
                    d3.select(this).attr("style", "stroke:black");                
　　　　　　　.on("mouseout", function (d, i) {
                    var color = barcolor;
                    var rec = d3.select(id).select("svg");
                    d3.select(this).attr("style", "fill:" + color);
                    d3.select(this).attr("style", "stroke:black");
                });

【TypeScript/JavaScript】d3.jsでグラフを作ろう（円グラフ）

TypeScript及びJavaScriptを使って、グラフ作成する方法で、d3.jsを使う方法があります。
前回に続いて、円グラフのつくり方を纏めてみました。

(1)データ
キー（label/value)と値(labelに対する値/valueに対する値)に値を設定したJsonデータを作成します。

            res = [
                { label: "USD/JPY", value: 87 }
                , { label: "GBP/JPY", value: 6 }
                , { label: "EUR/USD", value: 3 }
                , { label: "CHF/JPY", value: 2 }
                , { label: "AUD/JPY", value: 1 }
                , { label: "EUR/JPY", value: 1 }
            ];

※Jsonデータの詳細は以下サイトに詳しく書かれています。
 http://hakuhin.jp/js/json.html

(2)線データ（ステップライン）の作成
idは、HTMLファイルdivタグ要素とします。
idにｓｖｇ要素を追加します。
widthは幅、marginは余白、heightは高さを表します。
svg要素を作成して、g要素を追加します。

                var svg = d3.select(id).append("svg")
                    .attr({
                        width: width,
                        height: height
                    })
                    .append("g")
                    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
taransformは位置を指定します。

円弧を定義します。
            var pie = d3.layout.pie()
                .sort(null)
                .value(function (d: any) { return d.value; });

円弧の外径と内径を定義します。
            var arc = d3.svg.arc()
                .outerRadius(radius - 10)
                .innerRadius(0);

データバインドして、円弧を作成します。
classはarcとして、CSSファイルにarcの属性定義を行います。
g要素に円弧要素(arc)を設定します。

            var g = this.svg.selectAll("path")
                .data(pie(datas))
                .enter()
                .append("g")
                .attr("class", "arc");




            g.append("path")
                .attr("d", arc);

colorArrに円弧色を定義して、g要素に色を設定します。
colorArr.push("#00000"); などとして、円弧分設定します。

            g.attr("stroke", "black")   
                .style({
                    fill: function (d, i) {
                        return colorArr[i];
                    }
                });

svg要素に円弧アニメーション定義します。
svgにdataを使って円弧要素を作成します。
2秒で透過アニメーションを設定します。(transiton,durationを使用する)

                this.svg.selectAll("path")
                    .transition()   // トランジション開始
                    .duration(2000) // 1秒間でアニメーションさせる
                    .attrTween("d", function (d) {    // 指定した範囲で値を変化させアニメーションさせる
                        var interpolate = d3.interpolate(
                            { startAngle: 0, endAngle: 0 },   // 各円グラフの開始角度
                            { startAngle: d.startAngle, endAngle: d.endAngle }    // 各円グラフの終了角度
                        );
                        return function (t) {
                            return arc(interpolate(t)); // 時間に応じて処理
                        };
                    });

(3) 円弧にデータ表示
円弧にデータ(テキスト)させます。
尚、データ10以下は表示させないようにします。
            g.append("text")
                .attr("transform", function (d: any) { return "translate(" + D3Chart.arc.centroid(d) + ")"; })
                .attr("font-size", "10")
                .attr("font-family", "sans-serif")
                .style("text-anchor", "middle")
                .style("fill", "#ffffff")
                .text(function (d: any) { if (d.data.value < 10) return ""; return d.data.value; });

(4) 情報表示 

on("mouseover")で、円弧をbrawon色にして、infoクラス定義したg要素を表示させて、
そのg要素に情報表示させます。

var mousePos = d3.mouse(this);
にて、円弧の位置が取得できますので、情報g要素をその位置に表示させます。

on("mouseout")で表示した情報g要素を非表示させます。

            this.svg.selectAll("path")
                .on("mouseover", function (d, i) {
                    d3.select(this).attr("style", "cursor:pointer");
                    d3.select(this).attr("style", "fill:brown");
                    var lab = datas[i].label;
                    var val = datas[i].value + "%";
                    var pie = d3.select(id).select("svg");
                    var info = pie.append("g")
                        .attr("class", "info")
                        .attr("x", 0)
                        .attr("width", 70)
                        .attr("height", 62)
                        .style("fill", function (d) {
                            return d;
                        });
                    var width = d3.select(id).select("svg").attr("width");
                    var height = d3.select(id).select("svg").attr("height");
                    var mousePos = d3.mouse(this);
                    var info_x = mousePos[0] ;
                    var info_y = mousePos[1];
                    info.append("rect")
                        .attr("x", info_x)
                        .attr("y", info_y)
                        .attr("width", 100)
                        .attr("height", 50)
                        .attr("stroke", "black")
                        .attr("fill", "white");
                    info.append("text")
                        .attr("x", info_x +5)
                        .attr("y", info_y +20 )
                        .attr("font-family", "selif")
                        .style("fill", "black")
                        .text(lab);
                    info.append("text")
                        .attr("x", info_x +5)
                        .attr("y", info_y + 40 )
                        .attr("font-family", "selif")
                        .style("fill", "black")
                        .text(val);
                })
                .on("mouseout", function (d, i) {
                    var color = colorArr[i];
                    var pie = d3.select(id).select("svg");
                    d3.select(this).attr("style", "fill:" + color);
                    pie.select('g.info').remove();   
                });


(4) 凡例作成
円弧データ説明(凡例)を作成します。
            var legend = this.svg.selectAll(".legend")
                .data(colorArr)
                .enter().append("g")
                .attr("class", "legend")
                .attr("transform", function (d, i) {
                    return "translate(120," + i * 20 + ")";
                });

凡例の色を描画します。
            legend.append("rect")
                .attr("x", 0)
                .attr("width", 18)
                .attr("height", 18)
                .style("fill", function (d) {
                    return d;
                });

凡例の説明を描画します。
            legend.append("text")
                .attr("x", 20)
                .attr("y", 9)
                .attr("dy", ".35em")  // width
                .attr("font-family", "selif")
                .style("text-anchor", "start")
                .style("fill", "#ffffff")
                .text(function (d, i) {
                    return datas[i].label;
                });

【TypeScript/JavaScript】d3.jsでグラフを作ろう（線フラフ）

TypeScript及びJavaScriptを使って、グラフ作成する方法で、d3.jsを使う方法があります。
ここでは、d3.jsの使い方及び、折れ線グラフ（ステップライングラフ）のつくり方を纏めてみました。

１、d3.jsについて
D3.jsはデータに基づいてDocumentを操作するためのJavaScritpライブラリで、SVG(※)を作成します。
D3はHTML/SVG/CSSを使って、Googleアナリティクスみたいなグラフを作成することができます。
マウスオーバーとかクリックで任意のデータをDOMと結合させ、データ表示することもできます。
（Data-Driven な DOM 操作手順(頭のDを取って、D3というみたいです)）。

※SVG（スケーラブル・ベクター・グラフィックス）
SVG はテキストベースの画像フォーマットです。
簡単なマークアップコードの記述だけで指定でき、SVG コードを直接 HTML ドキュメント内に記述することもできます。
 実際に、小さな青い円を表示する場合、次のように記載すれば、ブラウザで表示できます。

<svg width="50" height="50">
   <circle cx="25" cy="25" r="22"
   fill="blue" stroke="gray" stroke-width="2"/>
</svg>

d3.jsの特徴：
・商用利用可能
・豊富なサンプル、ドキュメント
・インタラクティブなグラフの作成
・アニメーション
・jQueryライクなセレクタ(ドットによるメソッドチェイン)
 ⇒メソッドチェインが可能

２、TypeScriptでのd3.jsを使う
Visual Studio 2015を使って、TypeScript + d3.jsを使用します。
D3ライブラリとD3定義ファイル(d3.d.ts)をダウンロードして、VisualStudioに追加する。

(1) D3のライブラリ
 D3公式サイトからダウンロード。

(2) D3の型定義ファイル
 DefinitelyTypedからD3の型定義ファイルd3.d.tsをダウンロード。
 このファイルがあるとVisual Studio上でD3を使用するときにメソッド名等々を補完してくれます。

(3) Visual Studioでプロジェクトの作成及び、D3ライブラリの配置
 TypeScriptのプロジェクトを作成し、D3のライブラリを配置します。

d3フォルダを作成(例:project-folder)して、d3.jsを保存します。

（d3.d.tsも同様）

【d3ファイル】 

・project-folder/d3/d3.js
・project-folder/d3/d3.min.js （必要な場合）

 ※d3.jsファイルのサイズを小さくし、読み込み時間を速くするために通常版から空白文字を除去したバージョンです。どちらを使っても機能に変わりありません。 

【d3定義ファイル】 

・project-folder/d3/d3.d.ts

【HTMLファイル】 

  project-folder/d3/index.html

<!DOCTYPE html>
   <html lang="en">
      <head>
         <meta charset="utf-8">
         <title>D3 Test</title>
         <script type="text/javascript" src="d3/d3.v3.js"></script>
      </head>
      <body>
         <script type="text/javascript">
            // ここに D3 スクリプトを書きます
         </script>
      </body>
</html>

(4) グラフを作成
　あとは、body内に、d3を使ってグラフを記述します。
(1)～(4)までの手順は、以下のサイトを参照して、実行してみると良いです。
https://xnn.sakura.ne.jp/blog/2015/03/using_d3-js_with_typescript/

３、折れ線グラフのつくり方
 下のステップライングラフのつくり方について説明いたします。

ここでは、以下について説明します。
・データの扱い方
・線データ（ステップライン）の作成
・アニメーション
・イベント処理（マウスオン）
・情報表示 ・軸（スケール）

(1)データ
Xに日付、Yに値を設定したデータを作成します。
日付はDate型に変換します。
※Date型にしないと、グラフがうまく作れなかったので注意

            var parseDate = d3.time.format('%Y/%m/%d').parse;
            var data = [
                { date: "2015/03/01", value: -2518914 },
                { date: "2015/04/01", value: -2182314 },
                { date: "2015/05/01", value: -2019494 },
                { date: "2015/06/01", value: -1701534 },
                { date: "2015/07/01", value: -1548854 },
                { date: "2015/08/01", value: -1437104 },
                { date: "2015/09/01", value: -138463 },
                { date: "2015/10/01", value: 1000587 },
                { date: "2015/11/01", value: 1000587 },
                { date: "2015/12/01", value: 1000587 }
            ];
            data.forEach(function (d : any) {
                d.date = parseDate(d.date);
                d.value = d.value;
            });

(2)線データ（ステップライン）の作成
idは、HTMLファイルdivタグ要素とします。
idにｓｖｇ要素を追加します。
widthは幅、marginは余白、heightは高さを表します。
            var svg = d3.select(id).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 + ')');


svgにdataを使って線要素を作成します。
classはlineとして、CSSファイルにlineの属性定義を行います。
1秒で透過アニメーションを設定します。(transiton,durationを使用する)
            svg.append('path')
                .datum(data)
                .attr('class', 'line' )
                .attr('d', line0)
                .attr('opacity', '0')
                .transition()
                .duration(1000)
                .attr('opacity', '2.0');

線要素に点列を追加します。
classはcircle0にして、CSSファイルにlineの属性定義を行います。
on('mouseover',)で、#tooltipに情報表示します。
on("mouseout")で、情報表示を非表示にします。
 0.1秒ごとに、透過アニメーションを設定します。(transiton,durationを使用する)
            svg.selectAll('circle.t')
                    .data(data)
                    .enter()
                    .append('circle')
                    .attr('cx', function (d, i) {
                        return x(d.date);
                    })
                    .attr('cy', function (d, i) { return y0(d.value); })
                    .attr('r', 0)
                    .attr('class', 'circle0')
                    .style('stroke', 'black')
                    .on('mouseover', function (d) {
                        $('#tooltip').fadeIn();
                        $('#date').text(d.date);
                        $('#value').text(d.value);
                    })
                    .on("mouseout", function (d, i) {
                        $('#tooltip').fadeOut();
                    })
                    .transition()
                    .delay(function (d, i) {
                        return (i + 1) * 100;
                    })
                    .duration(1000)
                    .attr('r', 6);

線データを定義します（interpolateにて、ステップライン設定します）
            var line0 = d3.svg.line()
                .x(function (d: any) { return x(d.date); })
                .y(function (d: any) { return y0(d.value); });
            line0.interpolate("step-after");

(3) スケール・軸
 d3.time.scale()を使って、スケール定義します。
スケール定義することで、height/width内にデータが収まるように、スケールできるようになります。
 d3.svg.axis()を使って、軸を作成して、スケールとリンクさせます。
            var x = d3.time.scale() .range([0, width]);
            var y0 = d3.scale.linear().range([height, 0]);  

 d3.svg.axis()を使って、軸を作成して、スケールとリンクさせます。
            var xAxis = d3.svg.axis()
                .scale(x)
                .orient('bottom')
                .ticks(d3.time.months, 1)
                .tickFormat(d3.time.format('%Y/%m/%d'));
            var yAxisLeft = d3.svg.axis()
                .scale(y0)
                .orient("left")
                .innerTickSize(-width)
                .outerTickSize(0)
                .tickPadding(10);
            x.domain(d3.extent(data, function (d) { return d.date; })).nice();
            y0.domain([d3.min(data, function (d) { return Math.min(d.value); }), d3.max(data, function (d) { return Math.max(d.value); })]).nice();
nice()を使うと、値の範囲を丁度良い幅に設定してくれます。

X軸、y軸を追加します。
 classはaxisにして、CSSファイルに軸の属性定義を行います。
            svg.append('g')
                .attr('class', 'axis')
                .attr('transform', 'translate(0,' + height + ')')
                .attr('fill', 'rgba(0,0,0,0.85)')
                .call(xAxis);
            svg.append('g')
                .attr('class', 'axis')
                .attr('fill', 'rgba(255,0,0,0.85)')
                .call(yAxisLeft);

横方向のグリッド間隔を自動生成します。
 classはglineにして、CSSファイルにグリッド線の属性定義を行います。
            var rangeY = d3.range(0, height, 50);
            svg.selectAll('line')
                .attr('class', 'gline')
                .attr("stroke-width", 1)
                .attr("stroke-dasharray", "1, 3")
                .attr("shape-rendering", "crispEdges");

塗り潰し領域を生成します。
 classはlareaにして、CSSファイルにグリッド線の属性定義を行います。
            var area = d3.svg.area()
                .x(function (d : any, i) { return x(d.date) })
                .y0(function (d: any, i) { return y0(d.value); })
                .y1(function (d, i) { return height; });
            area.interpolate("step-after");
            svg.append("path")
                .attr("d", area(data))
                .attr('class', 'larea')
                .attr("opacity", 0.2);


※「円グラフ」「棒グラフ」については、 別の投稿にて、説明いたします。

(4) 情報表示 
tooltipというidにて、div要素を作成します。
(2)で説明したように、on('mouseover',)で点列上にマウスがのった時にtooltipを表示させて、情報表示します。
            var tag: string =
                "<div id='tooltip'>" +
                "<p> <strong id='date'> </strong></p>" +
                "<p>値: <span id='value'> </span></p>" +
                "</div>";
            $(id).append(tag);

【参考URL】
http://ja.d3js.info/alignedleft/tutorials/d3/ 
http://tech-sketch.github.io/graph-d3js/
http://blog.okazuki.jp/entry/2014/02/08/230843
http://blog.okazuki.jp/entry/2014/02/09/161540
http://blog.okazuki.jp/entry/2014/02/09/212419
⇒プログラミングの一連の流れを書いてあるサイト

https://xnn.sakura.ne.jp/blog/2015/03/using_d3-js_with_typescript/
 ⇒TypeScriptを使ったd3.jsについて詳しく書かれているサイト

 https://d3js.org/
⇒公式サイト

http://dataisfun.org/series/d3-tutorial-elemental
http://ja.d3js.node.ws/ 
https://github.com/mbostock/d3/wiki/Gallery
⇒サンプル（こんなことができるよ、って）

http://dotinstall.com/lessons/basic_d3js
http://dotinstall.com/lessons/basic_svg
 ⇒最初は、「ドットインストール」で動画をみて学習するといいと思います。

http://www.openspc2.org/reibun/D3.js/
 ⇒細かい説明が書かれているサイト