ECMAScript/tools/D3 - 豚吐露＠wiki

D3.js

簡単にグラフが作れるよ。って代物ではない。
最低限必要な知識として...

• DOM
• CSS
• JavaScript
• SVG

がある。
特に、SVGの知識は必須。そこが地味にハードル高い...

ref

http://www.openspc2.org/reibun/D3.js/
https://github.com/d3/d3/wiki/JP-Home

tools

C3.js
D4.js

h5

そういう区分でえぇのか分からんが、戻り値が変わるmethodと変わらないmethodがあるっぽい。

以下のmethodをcallすると戻り値が変わる？

• d3.select()

selector指定のDOMを取得する。

• d3.selectAll()

selectorの対象となる全DOMを取得する。selectorでこれから追加するであろうDOMを指定して、作ってやる必要がある。ココがクセ強い。

• d3.append()

指定のtagを追加する

• d3.transition()

対象を変化させる

戻り値が変わらないもの？
上のselectとかの戻り値に従属するmethodは、その従属元のobjectを返却するっぽい。

• d3.style()
• d3.attr()

対象の属性を指定する。

• d3.duration()

指定時間(msec)かけて処理(transition)を実行する。

• d3.delay()

指定時間(msec)経過後に処理を実行する。

• d3.ease()

処理(transition)に効果を付与する。 e.g.) 'bounce'

d3.scale

• scale.linear()

目盛り。

• scale.log()

対数目盛り。

• scale.category10()

規定の10色を取得。

• scale.category20()

規定の20色を取得。

d3.layout

• layout.pie()

円グラフ

• layout.pack()

• layout.force() 力学モデル
  • force.nodes()
  • force.links()
  • force.size()
  • force.linkDistance()
  • force.linkStrength()
  • force.gravity(0.1)
  • force.start()

d3.svg

• attr
  • d
  • stroke
  • fill

• svg.axis()

• svg.line()
  • line.interpolate()
    • "step"
    • "basis"
    • "basis-open"
    • "cadinal"
    • "cadinal-open"
    • "monotone"

• svg.symbol()
  • symbol.type()
    • "cross"
    • "diamond"
    • "square"
    • "triangle-up"
    • "triangle-down"
    • type.size()

d3.interpolate

d3.interpolateNumber

---

更新日： 2022年10月06日 (木) 11時49分30秒