epochjs / epoch

A general purpose, real-time visualization library.
http://epochjs.github.io/epoch
MIT License
4.97k stars 278 forks source link

TypeError: $(...).epoch is not a function #248

Open wangzhankun opened 3 years ago

wangzhankun commented 3 years ago

ENV

test file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./node_modules/d3/dist/d3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./node_modules/epoch-charting/dist/css/epoch.min.css">
    <script src="./node_modules/epoch-charting/dist/js/epoch.min.js"></script>

    <script type="module">

        import * as d3 from "https://cdn.skypack.dev/d3@7";

        const div = d3.selectAll("div");

    </script>

    <title>show</title>
</head>

<body>

    <div id="area" class="epoch category10" style="height: 200px;"></div>
    <script>
        const $ = require("jquery")
        var data = [
            { label: 'Layer 1', values: [{ x: 0, y: 0 }, { x: 1, y: 1 }, { x: 2, y: 2 }] },
            { label: 'Layer 2', values: [{ x: 0, y: 0 }, { x: 1, y: 1 }, { x: 2, y: 4 }] }
        ];
        var areaChartInstance = $('#area').epoch({
            type: 'area',
            data: data,
            axes: ['left', 'right', 'bottom']
        });
    </script>

</body>

</html>
adarshpunj commented 3 years ago

epoch() isn't available on d3.v4, try switching to d3.v3