我一直在尝试将最基本的D3示例放到Svelte应用程序中，但无法使其正常工作。起初，我尝试安装D3为节点模块：npm install d3但这产生相同的结果（缺乏结果）作为进口D3作为从CDN内外部脚本index.html：<script src="https://d3js.org/d3.v5.min.js"></script>。无论使用哪种方法，我都会在应用启动时收到一堆循环依赖警告：
(!) Circular dependency: node_modules\d3-selection\src\selection\index.js -> node_modules\d3-selection\src\selection\select.js -> node_modules\d3-selection\src\selection\index.js
但是该应用程序启动时没有任何错误，也没有发生D3动态格式化，也没有任何错误在Chrome内的DevTools控制台中弹出。
Svelte组件如下所示：
<script>
import * as d3 from 'd3';
var data = [30, 86, 168, 281, 303, 365];
d3.select(".chart")
.selectAll("div")
.data(data)
.enter()
.append("div")
.style("width", function(d) {
return d + "px";
})
.text(function(d) {
return d;
});
</script>
<style>
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<div class="chart"></div>
如预期的那样，将上面的代码放入静态HTML文件中会生成条形图。但是当作为Svelte组件运行时，不会显示任何内容。
我的rollup.config.js是：
import svelte …我正在尝试在<div>Svelte组件上实现文件删除器。我已经尝试了的所有组合，preventDefault但浏览器仍然加载删除的文件，而不是将其传递给组件。
<script>
function handleDrop(event) {
event.preventDefault();
console.log("onDrop");
}
function handleDragover(event) {
console.log("dragOver");
}
</script>
<style>
.dropzone {
display: block;
width: 100vw;
height: 300px;
background-color: #555;
}
</style>
<div class="dropzone" on:drop|preventDefault={handleDrop}
on:dragover|once|preventDefault={handleDragover}></div>
我试过event.preventDefault();在处理程序函数中有无。还尝试了on:dragenter事件和修饰符的不同组合，例如stopPropagation。浏览器仍会打开删除的文件。我究竟做错了什么？谢谢！
（更新）修正：
好的，罪魁祸首是|once修饰符。一旦从中删除on:dragover，<div>一切都会很好用，除了dragover在div上拖动时连续触发事件。event.preventDefault();不需要内部处理函数，因为|preventDefault修饰符可以正常工作。这是代码（<style>为简洁起见）：
<script>
function handleDrop(event) {
console.log("onDrop");
}
function handleDragover(event) {
console.log("onDragOver");
}
</script>
<div class="dropzone" on:drop|preventDefault={handleDrop}
on:dragover|preventDefault={handleDragover}></div>
暂时还没有提交答案，因为我想找出为什么我不能|once为dragover事件使用修饰符，这对我的应用程序很有用。谢谢！