d3.js在单击位置创建对象.enter（）时间轴，然后转换为日期

Question

我有一个d3.js时间轴，如果日期相隔x天数，则可以合并项目。

双击组合的项目时，时间轴会缩放，并且项目会展开。

这是通过将新项目添加到时间线数组来完成的。

我的问题是关于过渡的：目前，我正在.enter（）transition.duration(1500).ease(d3.easeCubic);

上添加过渡

我希望动画在您单击时看起来像是新添加的项从“合并”项中展开。目前，它们在各自的日期弹出到时间线中，因此好像它们是从左侧滑进来的。

这有可能吗？我在这方面找不到很多东西。

Answer 1

在过渡新项目之前，请将其位置设置为旧项目。

 // const clickedItem
 const itemsEnter = selection.enter();

 itemsEnter
     // before you create the transition, set their position to the clicked item
     .attr("transform", clickedItem.attr("transform"))
   .transition()
     .duration(1500)
     .ease(d3.easeCubic)
     .attr("transform", (d) => `translate(${d.x}, ${d.y})`);

过渡看起来像是从左侧滑入的原因是因为过渡没有输入条目的起点。因此，默认情况下，输入的项目将从滑块左侧的原点（0,0）开始。