0

我想将从 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>
4

1 回答 1

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>
于 2021-06-15T07:38:10.150 回答