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?
from d3.event is null in modular d3 project
No comments:
Post a Comment