Question

我已经很长时间没有使用JS / HTML了。我看到它随着时间的推移发生了很大变化。我尝试使用https://mauriciopoppe.github.io/function-plot/中的示例绘图库。我尝试在index.htm中运行的代码如下：

<div id="root"></div>
<script src="https://unpkg.com/d3@3/d3.min.js"></script>
<script src="https://unpkg.com/function-plot@1/dist/function-plot.js"></script>
<script type="module">
    import d3 from "d3";
    window.d3 = d3;

    const functionPlot = require("function-plot");
    const root = document.querySelector("#root");

    functionPlot({
      target: '#quadratic',
      data: [{
        fn: 'x^2'
      }]
    })
</script>

但是，Chrome在控制台上发出的尖叫声记录了以下消息，但未显示任何内容：

未捕获的TypeError：无法解析模块说明符“ d3”。相对引用必须以“ /”、“./”或“ ../”开头。

有什么主意吗？

Answer 1

最后！我找到了一个可行的例子。问题出在官方页面上包含的脚本中。为他人共享代码：

<meta charset="utf-8" />
<div id="root"></div>

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://mauriciopoppe.github.io/function-plot/js/function-plot.js"></script>
<script type="module">
    functionPlot({
        target: '#root',
        data: [{
            fn: 'sin(x)'
        }],
        grid: true,
        yAxis: {domain: [-1, 1]},
        xAxis: {domain: [0, 2*Math.PI]}
    });
</script>

Answer 2

您不需要使用import或require语句作为全局引用。在HTML中添加脚本后，它将成为全局引用。因此，您可以通过名称functionPlot或window.functionPlot直接访问它们。

没有元素具有quadratic作为ID。

<div id="root"></div>
<script src="https://unpkg.com/d3@3/d3.min.js"></script>
<script src="https://unpkg.com/function-plot@1/dist/function-plot.js"></script>
<script type="module">
    functionPlot({
target: '#root',
      data: [{
        fn: 'x^2'
      }]
    })
</script>

功能图/如何使用库

2 个答案: