D3.js 系列 (二) Observable -- D3 在线开发编辑工具 -- 导出篇

最新推荐文章于 2023-06-01 19:03:31 发布

hsany330

最新推荐文章于 2023-06-01 19:03:31 发布

阅读量1.3k

点赞数

原文链接：https://www.jianshu.com/p/57e893a06bd2

版权

Observable 的语法官网的文档写的很好，请参见用户手册

原文。

完成在线开发后，点击右上角的「 ... 」

点击 Download code 会打开新页面，复制 URL，例：

https://api.observablehq.com/@jashkenas/my-neat-notebook.js?v=3

这样的路径指向的是封装好的代码模块，结构如下：

// https://observablehq.com/@observablehq/downloading-and-embedding-notebooks@971
export default function define(runtime, observer) {
  const main = runtime.module();
  ......
  return main;
}

引用方式如下：

<!DOCTYPE html>
<body>
<script type="module">

// Load the Observable runtime and inspector.
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";

// Your notebook, compiled as an ES module.
import notebook from "https://api.observablehq.com/@jashkenas/my-neat-notebook.js?v=3";

// Load the notebook, observing its cells with a default Inspector
// that simply renders the value of each cell into the provided DOM node.
new Runtime().module(notebook, Inspector.into(document.body));

</script>

如果是框架中引入，http 这种引入方式会报错，可以将相关 js 文件下载到本地，然后这样引入：

<template>
  <div id="notebook"></div>
</template>

<script>
import { Runtime, Inspector } from '@/utils/observable/Observable.js'
import notebook from '@/utils/observable/bubble-chart.js'

export default {
  components: {},

  data() {
    return {
      runtime: null
    }
  },

  computed: {},

  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    startRender() {
      this.runtime = new Runtime().module(
        notebook,
        Inspector.into(document.getElementById('notebook'))
      )
      console.log('runtime', this.runtime)
    }
  }
}
</script>
<style scoped>
#notebook {
  padding: 62px;
}
</style>

作者：MercuryWang
链接：https://www.jianshu.com/p/57e893a06bd2
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

hsany330

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
D3.js 系列 (二) Observable -- D3 在线开发编辑工具 -- 导出篇

Observable 的语法官网的文档写的很好，请参见用户手册原文。完成在线开发后，点击右上角的「 ... 」code.png点击 Download code 会打开新页面，复制 URL，例：https://api.observablehq.com/@jashkenas/my-neat-notebook.js?v=3这样的路径指向的是封装好的代码模块，结构如下：// https://observablehq.com/@observablehq/downl...
复制链接

扫一扫