创建eventDrops示例失败求助，咨询适配eventDrops的d3版本

首先，你遇到的核心问题是版本不兼容：你使用的这个eventDrops实现是基于D3 v3和d3.chart（一个第三方D3扩展库）开发的，完全无法在D3 v4及以上版本运行——D3 v4彻底重构了API，移除了对d3.chart的支持，核心方法的语法也发生了大幅变化。

兼容的版本组合 #

要让你下载的这个eventDrops正常工作，必须搭配以下版本：

• D3.js v3.5.17（最后一个稳定的D3 v3版本）
• d3.chart v0.3.0（与D3 v3兼容的版本）

修改后的可运行代码 #

你的代码还缺少d3.chart的依赖引用，补上后完整代码如下：

<html> 
<head>
<title>EventDrops Demo</title> 
<!-- 替换为D3 v3 -->
<script src="https://d3js.org/d3.v3.min.js"></script> 
<!-- 引入d3.chart依赖 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-chart/0.3.0/d3.chart.min.js"></script> 
<!-- 保留你下载的eventDrops.js -->
<script src="./eventDrops.js"></script> 
<script lang="javascript"> 
function test() { 
var hardData = [{ 
name: 'sensor1', 
dates: [ 
new Date(1458068401000), 
new Date(1458068401000), 
new Date(1458068403000), 
new Date(1458068404000), 
new Date(1458068405000), 
new Date(1458068406000), 
new Date(1458068411000), 
new Date(1458068413000), 
new Date(1458068415000), 
new Date(1458068416000), 
],}]; 
var eventDropsChart = d3.chart.eventDrops(); 
d3.select('body') 
.datum(hardData) 
.call(eventDropsChart); 
} 
</script> 
</head> 
<body onload="test()"></body>
</html>

进阶选项：在D3 v4+中使用EventDrops #

如果想使用更新的D3版本（v5/v6及以上），可以选择官方维护的EventDrops库（这个库已经适配了现代D3版本）。它的用法和你当前的gist版本不同，比如需要通过npm安装或引入对应CDN，实例化方式也改为面向对象风格，你可以根据官方文档调整代码实现需求。

内容的提问来源于stack exchange，提问作者govardhan kamle