未捕获的类型错误：this.d3.set 不是 function
[英]Uncaught TypeError: this.d3.set is not a function
问题描述
Following the example on https://c3js.org/gettingstarted.html I ran into above mentioned error.
按照https://c3js.org/gettingstarted.html上的示例，我遇到了上述错误。 I have set up php -S localhost:8000 .我已经设置了php -S localhost:8000 。 Then I open this.html file:然后我打开这个.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>
What am I doing wrong here?我在这里做错了什么？ All I did was copypasting the codesample.我所做的只是复制粘贴代码示例。
2 个解决方案
解决方案1
2 2021-05-20 02:31:51
Looks like you have downloaded the latest version of both c3 and d3 , but the latest version of the c3 library is requiring v5 of the d3 library, it is not compatible with the newest version ( v6 ) yet.看起来您已经下载了c3和d3的最新版本，但是c3库的最新版本需要d3库的v5 ，它与最新版本 ( v6 ) 尚不兼容。
So, just downgrade your d3 version to v5.16.0 and it should be good.因此，只需将您的d3版本降级到v5.16.0就可以了。 Here is your code with just the sources updated to the currently latest c3 ( v0.7.20 ) and v5.16.0 of d3 , tested, seems to work without issues.这是您的代码，其中仅包含更新到当前最新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>
解决方案2
-1 2020-12-16 12:41:16
in the example you provided it is <script src="/path/to/d3.v5.min.js" charset="utf-8"></script> but you are missing v5 on your own code.在您提供的示例中，它是<script src="/path/to/d3.v5.min.js" charset="utf-8"></script>但您自己的代码中缺少v5 。 Check in "Network" tab of your browser if your d3 library is loaded or if your browser fails to find the file because of this filename difference.如果您的 d3 库已加载，或者您的浏览器由于此文件名差异而无法找到该文件，请检查浏览器的“网络”选项卡。 If so, fix the filename如果是这样，请修复文件名
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.