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

Question

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

sch*_*ark 4 javascript node.js d3.js c3.js

按照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>

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Ist*_*ros 7

看起来您已经下载了和的最新版本c3，但是该库需要d3最新版本的库，它与最新版本（）还不兼容。c3v5d3v6

所以，只要将你的d3版本降级到v5.16.0就应该没问题了。这是您的代码，其中的源代码已更新为当前最新的c3( v0.7.20) 和，v5.16.0经过d3测试，似乎可以正常工作。

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

Run Code Online (Sandbox Code Playgroud)

谢谢伊斯特万！刚访问 c3js 网站时，我一直在努力确定最好使用的 d3 版本。我在 `package.json` 中查看了一下，发现它写着 `"d3": "^5.8.0"`。我的第一个猜测是这意味着 5.8 之后的版本，所以我继续尝试当前的 v7，因此最终到了这里。所以我想“^5.8.0”意味着v5主要版本中的5.8或更高版本。 (2认同)

归档时间：	4 年，10 月前
查看次数：	3016 次
最近记录：	4 年，4 月前