javascript - Uncaught TypeError: this.d3.set is not a function

Following the example on .html I ran into above mentioned error. I have set up php -S localhost:8000. Then I open this .html file:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-patible" 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.

Following the example on https://c3js/gettingstarted.html I ran into above mentioned error. I have set up php -S localhost:8000. Then I open this .html file:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-patible" 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.

Share Improve this question asked Dec 16, 2020 at 12:01 schmark 711 silver badge7 bronze badges

Which version of d3 did you use in this example? If you are unsure, you can use console.log(d3.version) to check. – Andrew Reid Commented Dec 17, 2020 at 19:39

Add a ment |

2 Answers 2

Sorted by: Reset to default 7

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 patible with the newest version (v6) yet.

So, just downgrade your d3 version to v5.16.0 and it should be good. 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.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-patible" 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./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./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./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>

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. 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. If so, fix the filename

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Uncaught TypeError: this.d3.set is not a function - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)