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）开始。