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

Stack Overflow用户

提问于 2021-06-15 14:48:29

回答 1查看 21关注 0票数 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>

d3.js

observablehq

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-06-15 15:38:10

这是一个可行的解决方案:我只修改了一行代码：

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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67981298

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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