问题描述
我想把从 observablehq 网站下载的“Zoomable sunburst”图表放到 svg 框中。
如何编辑模块的源代码？
原始源代码可在此链接(https://observablehq.com/@d3/zoomable-sunburst?collection=@observablehq/data-visualization-for-developers) 中找到。我没有改变图表的设计，只改变了 index.html 页面。
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<title>d3 practice</title>
<link rel="stylesheet" type="text/css" href="./inspector.css">
<script type="module">
import define from "./index.js";
import {Runtime,Library,Inspector} from "./runtime.js";
const runtime = new Runtime();
const main = runtime.module(define,Inspector.into(document.body));
</script>
<body>
<div id="main_title">d3 practice</div>
<div id="chart_body">
<div id="chart_Box">
<svg></svg><!-- I want to place the chart at this svg tag location. -->
</div>
</div>
</body>
<footer>
</footer>
解决方法
这是一个可行的解决方案：我只是将一行改为：
runtime.module(define,name => {
if (name === "chart") return new Inspector(document.querySelector("#chart_box"));
});
意思是，过滤名为“chart”的单元格并将其显示在#chart_box元素中。
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>d3 practice</title>
<link rel="stylesheet" type="text/css" href="./inspector.css">
<script type="module">
import define from "./index.js";
import {Runtime,Library,Inspector} from "./runtime.js";
const runtime = new Runtime();
runtime.module(define,name => {
if (name === "chart") return new Inspector(document.querySelector("#chart_box"));
});
</script>
<body>
<div id="main_title">d3 practice</div>
<div id="chart_body">
<div id="chart_box">
<svg></svg><!-- I want to place the chart at this svg tag location. -->
</div>
</div>
</body>
<footer>
</footer>