Javascript 在D3.js中转换时，圈出留下的轨迹

我用从一个位置到另一个位置的平滑过渡绘制每个更新的圆。 这是我正在使用的代码

function drawChart(newData) 
{

var circles = slider.selectAll(".dot")
  .data(newData);

  circles.enter()
  .append("circle")
  .merge(circles)
  .transition() // and apply changes to all of them
  .duration(1000)
  .ease(d3.easeLinear)
  .attr("class", "dot")
  .attr("r", 10.5)
  .attr("cx", function(d,i) {
    return Math.pow(d.open,i); })
  .attr("cy", function(d,i) { return Math.pow(i,5)+d.close; })
  .style("fill", function(d) { return color(d.class); });

  circles.exit()
 .remove();
}

这是使用filterData功能更新数据的方式

function filterData(dd){

  var newData = dataset.filter(function(d) {
      return d.date.getDate() == dd.getDate() && d.date.getMonth() == dd.getMonth();
  })

drawChart(newData)
}

这段代码显示了简单的圆和过渡，而我希望过渡的方式是圆在移动时留下轨迹，如图所示

---

有没有办法做到这一点？任何帮助都将不胜感激。

我使您的起始位置更容易模拟，真正的计算在

.tween

函数中。请注意，我只执行了几次该函数，否则会得到连续的循环流

通过研究类似的问题，您通常可以找到类似的解决方案。在这种情况下，我基于它，这导致我

var svg=d3.select（'svg'）；
变量颜色=（v）=>v；
var nTrails=20；
函数createTraceBall（x，y）{
append（'circle'）
.classed（'shadow'，true）
.attr（'cx'，x）
.attr（'cy'，y）
.attr（'r'，10）
.style（'填充'、'灰色'）
.style（“不透明度”，0.5）
.transition（）
.持续时间（500）
.ease（d3.easeLinear）
.style（'填充'，'浅灰色'）
.style（“不透明度”，0.1）
.attr（'r'，3）
.remove（）；
}
功能绘图图（新数据）{
var circles=svg.selectAll（“.dot”）
.数据（新数据）；
圈。输入（）
.附加（“圆圈”）
.attr（“cx”，（d）=>d.open.x）
.attr（“cy”，（d）=>d.open.y）
.合并（圆）
.transition（）//并将更改应用于所有
.持续时间（1000）
.ease（d3.easeLinear）
.tween（“阴影”，功能（d）{
var xRange=d.close.x-d.open.x；
var yRange=d.close.y-d.open.y；
var-nextT=0；
返回函数（t）{
//t在[0,1]中，我们只希望执行它ntrail次
如果（t>nextT）{
nextT+=1/n轨道；
创建跟踪球(
d、 打开.x+x范围*t，
d、 打开。y+y范围*t
);
}
};
})
.attr（“类”、“点”）
.attr（“r”，10.5）
.attr（“cx”，（d）=>d.close.x）
.attr（“cy”，（d）=>d.close.y）
.style（“fill”，函数（d）{返回颜色（d.class）；}）；
圈。退出（）
.remove（）；
}
挂图([
{打开：{x:20，y:20}，关闭：{x:150，y:150}，类：'red'}，
{open:{x:150，y:20}，close:{x:20，y:150}，class:'blue'}，
{打开：{x:20，y:20}，关闭：{x:150，y:20}，类：'green'}
])；

---

谢谢。它帮了我很大的忙。我不知道tween属性，也无法从有关转换的文档中找到。也许我应该作为跟踪而不是跟踪进行搜索。