Search code examples
d3.jsobservablehq

How do I put a d3 chart into my chartBox?


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>

Solution

  • 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>