0

d3.js のトップページから飛べる sample コードが載ってるページがあるんですが
ここにあるソースコードの動かし方がわかりません

https://observablehq.com/@d3/stacked-to-grouped-bars

たくさんあるうちの1つめのブロックをはりつけてみたんですが
Uncaught SyntaxError: Unexpected identifier
になってしまいます
動かすために何かが必要なんでしょうか

かいてあるソースの一部でデータらしきものもないのでこれだけで動かないのはわかるんですが
syntax error がでる理由がわかりません

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>d3.js learning</title>
  <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
chart = {
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height]);

  const rect = svg.selectAll("g")
    .data(y01z)
    .join("g")
      .attr("fill", (d, i) => z(i))
    .selectAll("rect")
    .data(d => d)
    .join("rect")
      .attr("x", (d, i) => x(i))
      .attr("y", height - margin.bottom)
      .attr("width", x.bandwidth())
      .attr("height", 0);

  svg.append("g")
      .call(xAxis);

  function transitionGrouped() {
    y.domain([0, yMax]);

    rect.transition()
        .duration(500)
        .delay((d, i) => i * 20)
        .attr("x", (d, i) => x(i) + x.bandwidth() / n * d[2])
        .attr("width", x.bandwidth() / n)
      .transition()
        .attr("y", d => y(d[1] - d[0]))
        .attr("height", d => y(0) - y(d[1] - d[0]));
  }

  function transitionStacked() {
    y.domain([0, y1Max]);

    rect.transition()
        .duration(500)
        .delay((d, i) => i * 20)
        .attr("y", d => y(d[1]))
        .attr("height", d => y(d[0]) - y(d[1]))
      .transition()
        .attr("x", (d, i) => x(i))
        .attr("width", x.bandwidth());
  }

  function update(layout) {
    if (layout === "stacked") transitionStacked();
    else transitionGrouped();
  }

  return Object.assign(svg.node(), {update});
}
</script>
</body>
</html>

1 件の回答 1

2

Observableのセルのコードを単純にコピーペーストするだけでは、HTMLでは動作しません。
変換するのは大変なので、Observable上で学習するか、スタンドアローンのサンプルコードを参照することをおすすめします。

StackOverflow英語版での類似質問 でも同様の回答です。

Sadly, it's not that easy any more.

2
  • 単独で動かないのはわかるんですが syntax error になるが理解できなかったので、そもそも javascript じゃないってことなのかなと
    – user35303
    2022年2月22日 3:46
  • 1
    1行目のchart = {でオブジェクトの定義だと解釈されますが、2行目にプロパティキーがないのでSyntax Errorになります。JavaScriptのコードですが、Observableの実行環境に依存した書き方になっています。 リンク先のノートブックの右上「…」ボタンからExport→Download codeでコード一式をダウンロードできます。Node.jsが必要ですが、ローカルで実行させることは可能です。 2022年2月22日 11:54

この質問に回答するには、ログインする必要があります。