べにやまぶろぐ

技術寄りの話を書くつもり

D3.js

Firefox で mousemove イベントが発火しなくなったときは preventDefault を確認しよう

自前のドラッグアンドドロップを実装していて、Chrome や Safari では発火している mousemove イベントが Firefox では定常的に上がってこないという事象に悩まされました。 色々調べてみたところ下記の stackoverflow で同じような質問をしている人が。 SVG…

D3.js でロケールを設定してグラフ軸のラベルの表示を変更する

バージョン : D3.js 3.4.5 たとえば Multi-Series Line Chart のような時系列のチャートを描画するとき、元データの期間を見て勝手にラベル(X軸の "April" など)を振ってくれるのは良いんですが場合によっては『1月』、『2月』とか、あるいは『睦月』、『…

SVG 要素のクラス操作は addClass()/removeClass() ではなく attr() で。

バージョン : jQuery 1.11.0 下の fiddle は SVG rect (赤い正方形の) クラス操作の例です。 addClass() を使う $("#rect").addClass("selected"); と(クラスを上書くので addClass () と等価ではないですが) attr() を使う $("#rect").attr("class", "sel…

D3.js で mouseover/mouseout のイベントがひたすら発火するときは mouseenter/mouseleft を試してみる

バージョン : D3.js 3.0.4 追加検証用のメモエントリーです。こちら適当なサンプルを組んでみた*1のですが で左側の赤いのは mouseover/mouseout イベント、右側の青いのは mouseenter/mouseleave イベントを捉えるようにしてあるのですが左だと四角形の中を…

D3.js で rect を描くと辺の太さが均一にならない

表題の通りなのですが rect を append して下記の svg タグが生成されたとき、 <rect x="0" y="0" width="190" height="200" stroke="#008080" fill="white" stroke-width="5" style="stroke-opacity: 0.5;"></rect> 表示が のようになってしまって明らかに右辺と下辺が太くておかしくなってしまいました。 どうしたものかと調べたところ rect borders are not sharp Try changing your origin…

「エンジニアのためのデータ可視化[実践]入門 ~D3.jsによるWebの可視化」は D3.js を使わなくてもあらゆる KPI を扱う Web 屋さんにオススメな一冊

エンジニアのための データ可視化[実践]入門 ~D3.jsによるWebの可視化 (Software Design plus)posted with amazlet at 14.03.03森藤 大地 あんちべ 技術評論社 売り上げランキング: 894Amazon.co.jpで詳細を見る 技術評論社のサイトには電子版の販売もありま…