Javascript 时间轴上的鱼眼效应

我正在尝试用D3.js创建一个时间线。我将在时间轴上绘制事件，我希望在悬停时间轴时具有鱼眼效果

我的时间表如下：

参考：第三个图表位于上，但仅具有X轴

我还希望鱼眼效果在退出timline时变得平滑，就像在上一样

我似乎不知道如何以及在哪里包含fisheye代码，以及如何让它像我想要的那样工作。非常感谢您在这方面的帮助

var宽度=980；
函数timelineCircle（）{
var chart=d3.timeline（）
.tickFormat({
格式：d3.time.format（“%B”），
滴答时间：d3.time.month，
时间间隔：1，
尺码：20
})
.显示（“圆圈”）；
var svg=d3.选择（“时间线”）.append（“svg”）.attr（“宽度”，宽度）
.数据（testData）.调用（图表）
.on（“mousemove”，function（）{
console.log（'Fisheye please！'）；
});
}
var testData=[{
时代：[{
“颜色”：“绿色”，
“开始时间”：114780378000，
“结束时间”：114780378000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1147551840000，
“结束时间”：1147551840000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1147551840000，
“结束时间”：1147551840000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1147472820000，
“结束时间”：1147472820000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1147434780000，
“结束时间”：1147434780000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：11472360000，
“结束时间”：11472360000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1147271580000，
“结束时间”：1147271580000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1147179480000，
“结束时间”：1147179480000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1147179120000，
“结束时间”：1147179120000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1146918780000，
“结束时间”：1146918780000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1146755520000，
“结束时间”：1146755520000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1146755340000，
“结束时间”：1146755340000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1146490380000，
“结束时间”：1146490380000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：11463504600，
“结束时间”：11463504600
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1146246240000，
“结束时间”：1146246240000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1146244800000，
“结束时间”：1146244800000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1146167940000，
“结束时间”：1146167940000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1146166860000，
“结束时间”：1146166860000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1146075600000，
“结束时间”：1146075600000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1145886660000，
“结束时间”：1145886660000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1145885880000，
“结束时间”：1145885880000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1145738820000，
“结束时间”：1145738820000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1145737980000，
“结束时间”：1145737980000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1145299860000，
“结束时间”：1145299860000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1145131080000，
“结束时间”：1145131080000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1144950360000，
“结束时间”：1144950360000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1144874040000，
“结束时间”：1144874040000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1144854840000，
“结束时间”：1144854840000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1144696320000，
“结束时间”：1144696320000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1144696320000，
“结束时间”：1144696320000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1144519560000，
“结束时间”：1144519560000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1144518600000，
“结束时间”：1144518600000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：114435894000，
“结束时间”：114435894000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1144274100000，
“结束时间”：1144274100000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1144191060000，
“结束时间”：1144191060000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1144190460000，
“结束时间”：1144190460000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1144081200000，
“结束时间”：1144081200000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1144072440000，
“结束时间”：1144072440000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“起始时间”：1143993600000，
“结束时间”：1143993600000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：1143993360000，
“结束时间”：1143993360000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”：114382152000，
“结束时间”：114382152000
}, ]
}, {
时代：[{
“颜色”：“绿色”，
“开始时间”