时间戳

首页 > 解决方案 > 使用 vanilla D3.js 加载数据

javascript - 使用 vanilla D3.js 加载数据

问题描述

我是 Javascript 新手，在 D3.js 的上下文中我似乎无法掌握 Promises 的窍门。例如，下面的代码应该用我格式化的 csv 数据填充“数据”常量，而是用包装我格式化的 csv 数据的承诺填充。

data = (async function(){
  //the problem line
  const data = await d3.csv("{{url_for('static', filename='d3test.csv')}}");
  
  const columns = data.columns.slice(1);
  return {
    y: "Sales",
    series: data.map(d => ({
      name: d.Variations.replace(/, ([\w-]+).*/, " $1"),
      values: columns.map(k => +d[k])
    })),
    dates: columns.map(d3.utcParse("%Y-%m-%d"))
  };
})();

Observable.hq 中有效的同一行是：

const data = d3.csvParse(await FileAttachment("d3test.csv").text());

我想使用 vanilla javascript，而不是 observable.hq 嵌入。

编辑：我正在使用 D3 v5.min

标签： javascriptd3.js

解决方案

我通过决定实际嵌入我的 Observable.hq 笔记本解决了我的问题。人们会说“Observable.hq 不是普通的 Javascript”，但忽略了大多数 D3.js 教程和参考资料都使用 Observable.hq ......所以几乎没有机会学习正确的 Javascript（矛盾修饰词很多吗？）。

对解决方案有帮助的是： Observable：高级嵌入和下载 Observable Github 上的常见示例（自定义数据之一）

我在 Flask 模板中的工作代码（除了工作的 Observable Notebook 之外）是：

        const main = new Runtime().module(notebook, Inspector.into("#graphDiv"));

        (async function() {
          main.redefine("data", (async function(){
                  const data = await d3.csv('{{url_for("static", filename=g.pt)}}');
                  const columns = data.columns.slice(1);
                  return {
                    y: "Sales",
                    series: data.map(d => ({
                      name: d.Variations.replace(/, ([\w-]+).*/, " $1"),
                      values: columns.map(k => +d[k])
                    })),
                    dates: columns.map(d3.utcParse("%Y-%m-%d"))
                  };
                })())
        })();
        </script>

该代码加载整个笔记本，然后替换单个单元格/变量。没有太大的不同，我仍然有点困惑，但现在可以了。虽然值得注意的是其他单元格需要覆盖 - 使用 CSS 可见性完成。仍然是一个 hacky 解决方案。

推荐阅读