时间戳

首页 > 解决方案 > 如何更改 d3 observable notebook embed 的高度

d3.js - 如何更改 d3 observable notebook embed 的高度

问题描述

所以我知道我可以通过导入库来更改固定宽度而不是响应宽度，然后重新分配宽度值。但我也想改变高度，包括,height: 500似乎不起作用。我做错了什么，还有什么其他方法可以在不使用 iframe 的情况下嵌入具有可自定义宽度和高度的 d3 可观察笔记本图表？

<div class="chart"></div>
<p>Credit: <a href="https://observablehq.com/@tripletk/mmcovid19-confirmedcases">Myanmar COVID-19 Total Lab
        Confirmed Cases by Timmy Kyaw</a></p>

<script type="module">
    import {
        Runtime,
        Inspector,
        Library
    } from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";

    const runtime = new Runtime(Object.assign(new Library, {
        width: 500
    }));
    import define from "https://api.observablehq.com/d/1adf72a9a09835c3.js?v=3";
    const main = runtime.module(define, name => {
        if (name === "chart") return Inspector.into(".chart")();
    });
</script>

标签： d3.js

解决方案

在 Observable 笔记本中，宽度的工作方式与高度不同。你已经找到了如何改变宽度：它是一个反应变量，你可以像你正在做的那样用一个常量覆盖它；默认情况下，它与文档正文的宽度一起使用。

对于高度或您想要注入的任何其他值，例如dataor zipCode，您应该使用main.redefine("height", 500). （我在下面的示例中使用 200，只需将其更改为 500。）

<div class="chart"></div>
<p>Credit: <a href="https://observablehq.com/@tripletk/mmcovid19-confirmedcases">
Myanmar COVID-19 Total Lab Confirmed Cases by Timmy Kyaw</a></p>

<script type="module">
    import {
        Runtime,
        Inspector,
        Library
    } from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";

    const runtime = new Runtime(Object.assign(new Library, {
        width: 500
    }));
    import define from "https://api.observablehq.com/d/1adf72a9a09835c3.js?v=3";
    const main = runtime.module(define, name => {
        if (name === "chart") return Inspector.into(".chart")();
    });
    main.redefine("height", 200)
</script>

通常，使图形填充封闭的 div 而不是硬编码宽度和高度很有用：请参阅该方法的示例。同样作为参考，文档有更多关于redefine和new Library技术的信息。

推荐阅读