kristw/d3kit-timeline

TypeError: d3KitTimeline is not a constructor

Closed this issue · 6 comments

9n commented

I followed the README, and got TypeError: d3KitTimeline is not a constructor.
And I have tried to import d3kit-timeline via <script> and node.js / browserify, the same result.

chrismattmann commented

I have the exact same problem as @9n @kristw do you know what's going on here?

chrismattmann commented

FWIW I am using Chrome Version 64.0.3282.140 (Official Build) (64-bit)

chrismattmann commented

I was able to find this example and get it working just the normal way of <script> tag inclusion. What is the difference between this example and the library itself? https://bl.ocks.org/zachcp/0f2aadb4a2ea453b0804

kristw commented

I just published v2.0.1 that should resolve this problem. Please let me know if it works or not.
The problem was because of the module was written with es6 and when using script tag, the actual constructor is at d3KitTimeline.default, not d3KitTimeline. Luckily, webpack 3 has an update that let me configure the exported library to point to .default.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Title of the document</title>
</head>

<body>
  Hi!
  <div id="crisprtimeline"></div>
  <!-- Use d3 v4 -->
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3kit/3.2.0/d3kit.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/labella/1.1.4/labella.min.js"></script>
  <script src="https://cdn.rawgit.com/kristw/d3kit-timeline/master/dist/d3kit-timeline.min.js"></script>
  <script src="data.js"></script>
  <script>
    console.log('hmm', d3KitTimeline);

    var chart = new d3KitTimeline('#crisprtimeline', {
      direction: 'right',
      initialWidth: 600,
      initialHeight: 600,
      labelBgColor: "#777",
      textFn: function(d){ return d.time.getFullYear() + ' - ' + d.title;}
    });
    chart.data(data);
  </script>
</body>

</html>
chrismattmann commented

your fix worked! I sent you a PR to include this as an example in #18

malszhang commented

I followed the README, and got TypeError: d3KitTimeline is not a constructor.
And I have tried to import d3kit-timeline via <script>, it works.But import d3KitTimeline via node, it didn’t work.
image
and my d3kit-timeline version is 2.0.1