Примечание : я нашел ответ на этот вопрос здесь .Проблема решена;больше ответов не нужно!
Я делаю проект со следующей структурой:
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);
});
И вывод:
MouseEvent {isTrusted: true, screenX: 266, screenY: 247, clientX: 266, clientY: 175, …}
null
Если я использую d3 глобально через тег сценария, обращаясь к нему внутри модуля через window.d3, тогда d3.event правильноловит событие мышиЯ хочу создать модульный проект и избежать глобального объекта d3.
Это достижимо, и если да, то как?