1

Note: I found an answer to this question here. The problem is solved; no need for more answers!

I am doing a project with the following structure:

root
|
|____js
|     |__index.js
|
|__node_modules
|             |__d3-*
|             
|
|__index.html
|__package.json

index.html:

<head>
    <script src="https://unpkg.com/getlibs"></script>
</head>

<body>
<div id="detail"></div>
</div>
<!--script type="module" src="./js/index.js"></script> Also tried this method -->

<script>
    System.import('./js/index.js');
</script>
</body>

index.js:

import {select} from "d3-selection";
import {event as currentEvent} from "d3-selection";
let svg = select('#detail')
        .append('svg')
        .attr('width', 500)
        .attr('height', 500);
        svg.on('click', function() {
            console.log(window.event);
            console.log(currentEvent);
         });

And the output is:

MouseEvent {isTrusted: true, screenX: 266, screenY: 247, clientX: 266, clientY: 175, …}
null

If I use d3 globally through a script tag, referring to it inside the module via window.d3, then d3.event correctly catches the mouse event. I want to create a modular project and avoid having a global d3 object.

Is that achievable, and if so, how?

jrook
  • 3,459
  • 1
  • 16
  • 33
  • Might want to take a look at https://stackoverflow.com/q/36887428/215552; sounds very similar. – Heretic Monkey Sep 29 '18 at 18:27
  • @HereticMonkey, the code in this question is my implementation of the top-voted answer for that question. As you can see in the output, `currentEvent` is still null. This does not happen if I hang a `d3` object to `window` which I am trying to avoid. – jrook Sep 29 '18 at 18:31
  • I don't see an implementation of that entire answer though; there is a `import * as d3 from 'd3';` line in that answer that is not in your question. There is also [this answer](https://stackoverflow.com/a/39482882/215552) which refers to using `import d3 from 'd3';` and (presumably) using `d3.event`, and [this answer](https://stackoverflow.com/a/40304080/215552) which talks about making `d3` a target to a specific implementation of `d3` (in your case, presumably `import d3 from 'd3-selection'` would be sufficient). – Heretic Monkey Sep 29 '18 at 18:36
  • @jrook please provide additional details including the version of d3 and SystemJS and your SystemJS configuration if you have one – Aluan Haddad Sep 29 '18 at 18:56
  • Sorry. You are correct I misread – Aluan Haddad Sep 29 '18 at 19:04
  • @HereticMonkey, please provide your comment as an answer and I will accept it. I have another question if you care to answer though: how come I can import `d3` from `d3-selection` even though there is no declaration of its export in `d3-selection`'s `index.js` ?? – jrook Sep 29 '18 at 19:08
  • 1
    Well, I'd rather close the question as a duplicate of the other question, since it's basically the same, and my comment is basically a recapitulation of the answers from that question, meaning I'd be stealing rep from those answerers. However, since it has a bounty, I can't close it. – Heretic Monkey Sep 29 '18 at 19:13
  • @HereticMonkey, I don't mind the question being labeled as a duplicate. But I went through all those questions multiple times before posting a question myself and still couldn't figure it out. [This one](https://stackoverflow.com/a/40304080/2928853) works and I upvoted it. Still the question is asked in the context of React and people may be confused because of it. Note that I wanted to avoid using `d3` as a module and only use its submodules so I didn't consider many of the answers in the questions you refer to. – jrook Sep 29 '18 at 19:20
  • I do think it is a duplicate. You may want to consider adding a comment to that answer about having to use `d3.event` to capture the event rather than just importing `event`. I'm guessing they're using the `d3` global variable to capture the latest event. Not a great design, but then I'm not the author of a widely-used library :). – Heretic Monkey Sep 29 '18 at 19:23
  • @HereticMonkey, ok, what should I do about this question? Apparently, I can't cancel the bounty! – jrook Sep 29 '18 at 19:24
  • 2
    I'd just let the bounty expire; there haven't been that many views. You might want to add a note to the top of the question about its duplicate nature though, to dissuade rep-hungry answerers. – Heretic Monkey Sep 29 '18 at 19:26

0 Answers0