I want to put the "Zoomable sunburst" chart downloaded from observablehq site into the svg box.
How do I edit the module's source code?
The original source code can be found at this link(https://observablehq.com/@d3/zoomable-sunburst?collection=@observablehq/data-visualization-for-developers). I did not change the design of the chart, only the index.html page.
<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>
Here is a working solution: I just changed one line to read:
runtime.module(define, name => {
if (name === "chart") return new Inspector(document.querySelector("#chart_box"));
});
meaning, filter the cell named "chart" and display it in the #chart_box element.
<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>