如何将 d3 图表放入我的 chartBox 中？

Question

我想把从observablehq网站下载的“Zoomable sunburst”图表放到svg框中。

如何编辑模块的源代码？

原始源代码可以在link(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>

Answer 1

这是一个有效的解决方案：我只是将一行更改为：

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>

如何将 d3 图表放入我的 chartBox 中？

How do I put a d3 chart into my chartBox?

d3.js

observablehq