学习 D3 的新姿势

今天用了半天的时间把 observable HQ 上面的 Learn D3 学习了一遍，这是纯笔记版。

不过今天真的是爽到了，没错，我终于找到了以前学习 D3 没动力的原因了，那么厚的一本书，基本上就是把 D3 gallery 抄了一遍。最开始基本上还要学一个 D3 版本的 jQuery 选择器，数据还要自己搞，基本读了两章就打算放弃。

values = [..."123456"];
import {chart as chart1} with {values as data} from "@d3/histogram";

这就是一个柱状图了！！！爽到有没有？

如果你想写一个控制界面

viewof replay = html`<button>Replay</button>`

使用这个控制器

replay, html`
<svg viewBox="0 0 ${width} ${height}">
  ${d3.select(svg`<g>`).call(shape_xAxis).node()}
  ${d3.select(svg`<g>`).call(shape_yAxis).node()}
  ${d3.select(svg`
    <path
      d="${line(shape_data)}"
      fill="none"
      stroke="steelblue"
      stroke-width="1.5"
      stroke-miterlimit="1"
      stroke-dasharray="0,1"
    >
    </path>
  `).call(reveal).node()}
</svg>
`

哈哈，有趣，这语法很有想象力，比 svelte 更加大胆，仿佛用 JavaScript 实现了一个类似于 python 的词法。如果你想创建一个复杂的变量，你可以：

sum = {
  let s = 0;
  for (let i = 0; i < 10; ++i) {
    s += i;
  }
  return s;
}

Observable HQ 的每个语句类似于 react 的 render 函数，你甚至可以把它写成一个迭代器。当 replay 被点击，页面展示的数值会从 1 逐渐增加到 299。

{
  replay;
  for (let i = 0, n = 300; i < n; ++i) {
    yield i;
  }
}

另外可以参考如何利用 Wikipedia 的数据进一步使用 observable HQ。