(ジャーナル)インパクト・ファクターと、各紙に受ける印象
入力値やインタラクションの結果をデータとグラフに反映する仕組みはd3.jsに備わっているのか否か
d3.jsには双方向バインディングに該当する仕組みがない.
dataの取得・更新とrebinding、rebinding後の更新が必要. うーむ
There's no data-binding magic à la angular that's going to trigger a "redraw". Just call .data and then re-set the attributes
javascript - How to update bound data in d3.js? - Stack Overflow
下のtext要素をクリックしてごらん、なんと編集できるよ!!
contentEditableなHTML要素の下にtext要素を配置し、このセットをforeignObjectへ入れてSVG要素下に吊るす.
HTML5にはcontentEditableという属性がある。
<div contenteditable>編集可能</div>
のように属性を付与すると、
になる.
contentEditableがSVGで使えれば万々歳、なのだが、使えない...
(次のSVGに導入しようぜ、という提案はされてたりする Add `contenteditable` attribute for SVG text elements · Issue #332 · w3c/svgwg · GitHub)
\\動かない例 <svg> <text contenteditable>SVGは編集不可 (クリックしても無駄無駄、無駄ァ)</text> </svg>
しかし嬉しいことに、contentEditableなHTML要素の下にSVG要素を配置すると, contentEditableが引き継がれる
https://github.com/w3c/svgwg/issues/332 (標準化された動作じゃない...と思う)
なので
<div contenteditable> <text>divに入れるとSVGを編集可能</text> // SVGのtext要素 </div>
とすると、
になる.
やったねたえちゃん、SVGが編集できるよ
ここで問題になるのが<svg>下のHTML要素.
おそらくこのページに来た人は、SVGで作りこんだ図に編集可能textを入れ込みたいのだと思う.
つまり、<svg>要素下にrectやらcircleやら置いてあることになる.
textを編集可能にするために、上記の<div contenteditable>を利用すればよいわけだが...
<svg>下にHTML要素(例えば<div>)を置くことはできない javascript - How to append div tag into a SVG rect element? - Stack Overflow
そこで登場するのがforeignObject.
この要素を配置するとあら不思議、HTML要素をforeignObject下に配置しても無問題!!
よって
<svg>
<foreignObject>
<div contenteditable>
<text>私はtext要素。でも編集できるよ！ (クリックしてみ)</text>
</div>
</foreignObject>
</svg>
のようにすれば、
となる。
<div id="divv2">HTML, non-contentEditable. But enabled by d3.js!!</div>
d3.select("#divv2").attr("contenteditable", true);
d3.select("#svgEdit") .append("foreignObject") .attr("width", 600) .attr("height", 50) .append("xhtml:div") .attr("contenteditable", true) .append("text") .text("dynamic editable text by d3.js!!!");
Javascript標準で日時を扱うにはDateオブジェクトを使う.
使い方は割と簡単で、いくつか問題点はあるけどとりあえず使う分にはまぁ
こんな風になっている
inputはローカル時間 (日本時間とかアメリカ時間とか。時差のようなもの) の情報を持っているが、気にせずDateオブジェクトに入れてしまう.
Dateオブジェクトがローカル時間を良い感じに扱ってくれ、内部ではローカル時に影響されないUnix時間という時間表現で時間を保持している.
Dateオブジェクトから日時情報を取り出す際には様々な書式を設定でき、ISO8601表記や、月(month)のみの取り出しなどが出来る.ローカル時間に合わせた表記ももちろんできるよ、優秀！
コンストラクタや各種setter, getterはググれば簡単にわかる。上記の全体像が大事.
以下は興味のある人向け
Dateオブジェクト内ではUnix時間で日時が表現されている.
A Date object contains a Number indicating a particular instant in time to within a millisecond. Such a Number is called a time value. A time value may also be NaN, indicating that the Date object does not represent a specific instant of time.
Time is measured in ECMAScript in milliseconds since 01 January, 1970 UTC.
https://www.ecma-international.org/ecma-262/6.0/#sec-time-values-and-time-range
https://www.ecma-international.org/ecma-262/7.0/#sec-time-values-and-time-range
* ECMAScript 2015 ~ 2018-draft まで 20.3.1.1Time Values and Time Range に変更なし
(ECMAScript 2015, 2016, 2017, 2018-draft)
20.3 Date Objects (https://tc39.github.io/ecma262/#sec-date-objects)にて詳しく規定
language specification 20.3をdiff
20.3.1.16 Date Time String Formatだけ変更点がありそう
ほかは表記上の変更のみにみえる
20.3.3.4に変更点
20.3.4.41-42に大幅変更？
DateValue internal slotが全ての肝.
DateValueはDateインスタンスの持つ内部時間表現。Unix時間(1970-01-01T00:00zからの経過ミリ秒)で表現されている.
コンストラクタもsetterも、いろいろな入力をUnix時間へ変更してDateValueに入れる仕事をしている.
getterはどれもUnix時間を適切な出力フォーマットへ変換する仕事をしている.
thisTimeValue(value) /* * @argument {Object} value - argument object * @return {?} - value.[[DateValue]] || Type Error exception */ // 20.3.4
"this time value"は thisTimeValue(this)の返り値 (20.3.4)
Date prototype objectはDateValue internal slotを持たない(20.3.4)
インスタンスが初期化されたとに DateValue == time valueになるもよう (20.3.4)
20.3.1.15 TimeClip (time): time => NaN || parseInt(time)
MakeDate() -> TimeClip(UTC(finalDate)) -> DateValue
ほとんどのsetterでは、setterコール時にUnix時間からYear等を再計算し、setterの引数と再計算値を用いて(internalな)MakeDate()を行ってUnix時間へ再変換してる.
\115 = $1とする
mermaid.jsには様々な機能がある。その中でもガントチャート機能に着目した。
そもそも論だが、ガントチャートは依存関係を書く機能を有するグラフなのか？
mermaid.js対応エディタがたくさんあるみたいで、彼らを使うのも手かも？
mermaid.jsのatomエディタ拡張、これはぐぅ神.
github.com
レポジトリ
github.com
gitbook, readme代わり
mermaid · GitBook
特にgantt部分
Gantt diagram · GitBook
色設定の仕方
qiita.com
簡単な使い方
qiita.com
ガントチャートjsライブラリ
magnet88jp.hateblo.jp
blog.htmlhifive.com
google chart
Gantt Charts | Charts | Google Developers
ガントチャートソース
mermaid/src/diagrams/gantt at master · knsv/mermaid · GitHub
Jisonとやらでparserを作製・js化している模様。
ganttRenderer.js
mermaid/ganttRenderer.js at master · knsv/mermaid · GitHub
こいつがガントチャート部の肝その１。
exportしてるオブジェクトは
のみ。
draw()の中ではひたすら愚直にd3.jsで要素を作っている。健気だ…
draw()内では本当にrenderingしかしておらず、依存関係に基づいたstart-time計算などはされていない。parser側かな？
gantt.yy.getTasks()でtaskArrayを取得している。このgetTasks()があやしい
ganttDb.js内のgetStartDate()が鍵だった。
“after"を正規表現で検出し、依存タスクの時間関係をDateにコンパイルしている。こうすれば後は描写するだけ
mermaid/ganttDb.js at master · knsv/mermaid · GitHub
d3.jsのバージョンは3.5.17で固定 (package.jsonより mermaid/package.json at master · knsv/mermaid · GitHub )。やっぱり古くからのライブラリはv4に移行しづらいよな。
annotation by myself
/** * Draw gantt chart * @param {string} text - gantt data, which will be parsed soon * @param {string} id - id of something HTML object * @returns {void} */ function draw(text, id){}
text引数は (“./parser/gantt”).parser.parse()で即座にパースして終わり。
id引数はgetElementByIdでelemを出すために即使用して終わり.
parser => "after" compiler => draw (d3.js)
