未捕获的类型错误：this.d3.set不是一个函数。

Question

未捕获的类型错误：this.d3.set不是一个函数。

javascriptnode.jsd3.jsc3.js

4

按照https://c3js.org/gettingstarted.html上的示例，我遇到了上述错误。我已经设置了php -S localhost:8000。然后我打开了这个 .html 文件：

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>C3 Example</title>

<!-- Load c3.css -->
<link href="c3/c3.css" rel="stylesheet">

<!-- Load d3.js and c3.js -->
<script src="d3/d3.min.js" charset="utf-8"></script>
<script src="c3/c3.min.js"></script>
</head>


<body>
    <div id="chart"></div>

    <script type="text/javascript">
    var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ],
      axes: {
        data2: 'y2' // ADD
      }
    },
    axis: {
      y2: {
        show: true // ADD
      }
    }
});
    </script>

</body>
</html>

我在这里做错了什么？我只是复制粘贴代码示例而已。

- schmark

你在这个例子中使用的是哪个版本的d3？如果不确定，你可以使用console.log(d3.version)来检查。 - Andrew Reid

2个回答

0

在您提供的示例中，代码为<script src="/path/to/d3.v5.min.js" charset="utf-8"></script>，但是您自己的代码中缺少v5。请在浏览器的“网络”选项卡中检查您的d3库是否已加载，或者因为文件名不同而无法找到文件。如果是这样，请修复文件名。

- nikos.svnk

我在文件夹和源代码中将“d3.min.js”重命名为“d3.v5.min.js”，但仍出现相同的错误。 - schmark

1

@schmark，文件名是否包含“v5”并不重要。我只是提醒你，以防你的文件名有误，浏览器无法找到和加载文件。 - nikos.svnk

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- István Ujj-Mészáros · Accepted Answer

看起来你已经下载了最新版本的 c3 和 d3，但是 c3 库的最新版本需要 d3 库的 v5 版本，而它目前还不兼容最新版本 (v6)。

所以，只需将你的 d3 版本降级到 v5.16.0，就可以解决问题了。这里提供了经过更新到当前最新版本的 c3 (v0.7.20) 和 d3 (v5.16.0) 的代码，测试后似乎没有问题。

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>C3 Example</title>

    <!-- Load c3.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css" integrity="sha512-cznfNokevSG7QPA5dZepud8taylLdvgr0lDqw/FEZIhluFsSwyvS81CMnRdrNSKwbsmc43LtRd2/WMQV+Z85AQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- Load d3.js and c3.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js" integrity="sha512-FHsFVKQ/T1KWJDGSbrUhTJyS1ph3eRrxI228ND0EGaEp6v4a/vGwPWd3Dtd/+9cI7ccofZvl/wulICEurHN1pg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js" integrity="sha512-+IpCthlNahOuERYUSnKFjzjdKXIbJ/7Dd6xvUp+7bEw0Jp2dg6tluyxLs+zq9BMzZgrLv8886T4cBSqnKiVgUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>


<body>
    <div id="chart"></div>

    <script type="text/javascript">
    var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ],
      axes: {
        data2: 'y2' // ADD
      }
    },
    axis: {
      y2: {
        show: true // ADD
      }
    }
});
    </script>

</body>
</html>