D3.js 系列 (二) Observable -- D3 在线
2019-07-13 本文已影响0人
MercuryWang
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
Observable 的语法官网的文档写的很好，请参见 用户手册
原文 。
完成在线开发后，点击右上角的 「 ... 」
code.png
点击 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>
