D3.jsを使用した折れ線グラフです。
このままでは少し味気がないので、縦軸の土曜日を・日曜日を・ボーダーラインとして横軸の500をオレンジに変更したいと思います。

「Onsen UI V2 JS Minimum」というテンプレートを使用します。
日付の処理にMoment.jsを使用します。
以下のようにファイルを配置します。

index.html

style.css

app.js

d3chart.js

解説します。

まず、app.jsの27行で日付の処理を行っていますが、日曜日と土曜日を区別するため、日付「YYYYMMDD」の後ろに曜日を意味する0~6の数字を付け加えます。

次に、d3chart.jsの94~101行で縦軸の色を変更しています。
selectAll()で縦軸を抽出し、filter()functiondは日付+曜日が入っているので、最後尾の一文字が「0」は日曜日・「6」は土曜日の場合、trueを返し、該当する縦軸を抽出します。
そして、その縦軸に対してCSSクラスaxis-sundayaxis-saturdayを追加します。

最後に、d3chart.jsの106~109行で横軸の色を変更しています。
selectAll()で横軸を抽出し、filter()functiondは200~700の数値が入っているので、その数値が500の場合、trueを返し、該当する横軸を抽出します。
そして、その横軸に対してCSSクラスaxis-borderを追加します。

注意点は、追加するCSSクラスの値に必ず!importantを付け加えることです。
そうしないと、色が変わりません。

Monacaデバッガーの結果です。

Android版

iOS版

実は、シンプル体重管理のグラフに日曜日の縦線を表示する機能を追加する作業に、2日間もかかってしまいました。
最初は、自分の思い込みでeach()を使ってコードを書きましたが、何か違うような気がして、D3.jsのドキュメントを何度も読んで見つけたのがfilter()でした。

【Monaca】D3.jsを使用したグラフの特定の軸の色を変更する
Tagged on: