Javascript 从数据到行的日期和时间转换

我用D3V5创建了这个图表。此外，我还附上了小提琴上的样本数据

我已经包括了

勾选

功能代码块，它在幻灯片左侧的路径上为x和y比例和线/数据添加了新的域：

当勾号函数执行时，线条会重新生成，使其看起来像是反弹。
当它重建线路时，怎么可能是平滑的，没有任何反弹

var tr=d3
.transition（）
.持续时间（目标勾选持续时间）
.ease（d3.easeLinear）；
函数tick（）{
返回setInterval（函数（）{
var newData=[]；
var tickFunction=obj.tick.fndickdata；
if（tickFunction！==未定义&&typeof tickFunction===“function”）{
newData=tickFunction（）；
对于（var i=0；i0）{
var newMaxDate、newMinDate、newDomainX；
如果（isKeyXDate）{
newMaxDate=新日期(
应用数学(
无效的
对象数据映射（函数（e）{
返回新日期（e[obj.dataKeys.keyX]）；
})
)
);
newMinDate=新日期(
Math.min.apply(
无效的
对象数据映射（函数（e）{
返回新日期（e[obj.dataKeys.keyX]）；
})
)
);
newDomainX=[newMinDate，newMaxDate]；
}否则{
newDomainX=[
d3.最小值（obj.数据，功能（d）{
返回d[obj.dataKeys.keyX]；
}),
d3.最大值（obj.数据，功能（d）{
返回d[obj.dataKeys.keyX]；
})
];
}
//更新域
//x、 域（[newMinDate，newMaxDate]）；
if（obj.tick.updateXDomain）{
newDomainX=obj.tick.updateXDomain；
}
x、 域（newDomainX）；
if（obj.tick.updateDomain）{
y、 域（obj.tick.updateDomain）；
}
attr（“transform”，null）；
//把线滑到左边
if（目标区域allowArea）{
attr（“转换”，空）；
区域路径
.transition（）
.过渡（tr）
.attr（“d”，区域）；
}
路径
.transition（）
.过渡（tr）
.attr（“d”，行）；
svg
.selectAll（“.x”）
.transition（）
.过渡（tr）
.呼叫（x轴）；
svg
.selectAll（“.y”）
.transition（）
.过渡（tr）
.呼叫（y轴）；
//将旧数据点从前面弹出
obj.data.shift（）；
}
}，obj.tick.delay）；
}
this.interval=tick（）

当您转换

d

属性时，反弹实际上是预期的结果，该属性只是一个字符串

这里有几种解决方案。在不太重构代码的情况下，一个简单的方法是使用Mike Bostock在此bl.ocks:中编写的

pathTween

函数。在这里，我对它做了一点修改，这样你就可以传递数据了，如下所示：

path.transition()
    .transition(tr)
    .attrTween("d", function(d) {
        var self = this;
        var thisd = line(d);
        return pathTween(thisd, 1, self)()
    })

---

这是分叉的plunker:

正如Gerardo所指出的，除非修改方法，否则转换路径的

d

属性不会很好。下面是一个简单的例子，说明如果简单地更新路径的

d

属性，将出现的摆动/反弹：

pᴏɪɴᴛsᴛʀᴀɴsɪᴛɪᴏɴɪɴɢ ᴀᴄʀᴏss sᴄʀᴇᴇɴ, ᴡɪᴛʜ ᴘᴀᴛʜ ᴛʀᴀɴsɪᴛɪᴏɴɪɴɢ ғʀᴏᴍ ᴏɴᴇ ᴅᴀᴛᴀ sᴇᴛ ᴛᴏ ᴛʜᴇ ɴᴇxᴛ.

迈克·博斯托克（Mike Bostock）在一篇短文中指出了上述行为，下面是一段复制上述动画的片段：

var n=10；
var数据=d3.范围（n）.映射（函数（d）{
返回{x:d，y:Math.random（）}
})
var x=d3.scaleLinear（）
.domain（d3.extent（数据，函数（d）{return d.x；}））
.范围（[10490]）
变量y=d3.scaleLinear（）
.范围（[290,10]）；
var line=d3.line（）
.x（函数（d）{返回x（d.x）；}）
.y（函数（d）{返回y（d.y）；}）
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，400）
.附加（“g”）；
var path=svg.append（“路径”）
.基准（数据）
.attr（“d”，行）；
var points=svg.selectAll（“圆”）
.data（数据，函数（d）{return d.x；}）
.输入（）
.附加（“圆圈”）
.attr（“cx”，函数（d）{返回x（d.x）；}）
.attr（“cy”，函数（d）{返回y（d.y）；}）
.attr（“r”，5）；
函数tick（）{
var transition=d3.transition（）
.持续时间（1000）；
var newPoint={x:n++，y:Math.random（）}；
data.shift（）
数据推送（newPoint）；
x、 域（d3.extent（数据，函数（d）{返回d.x；}））
points=svg.selectAll（“圆”）.data（数据，函数（d）{return d.x；}）
点。退出（）
.过渡（过渡）
.attr（“cx”，函数（d）{返回x（d.x）；}）
.attr（“cy”，函数（d）{返回y（d.y）；}）
.remove（）；
points.enter（）.append（“圆”）
.attr（“cx”，函数（d）{返回x（d.x）+30；}）
.attr（“cy”，函数（d）{返回y（d.y）；}）
.合并（点）
.过渡（过渡）
.attr（“cx”，函数（d）{返回x（d.x）；}）
.attr（“r”，5）；
路径基准（数据）
.过渡（过渡）
.attr（“d”，行）
。在“结束”处打勾；
}
勾选（）；

路径{
填充：无；
笔画：黑色；
笔画宽度：2；
}

---

您提供的plunker实际上工作不正常，即path向左侧过渡。难道它不能是平滑的，没有反弹吗？你能告诉我我可以在哪些地方修改代码，使之更平滑吗？我会这样做的，谢谢你分享“路径之间”这对我来说是一个新的知识，但在这个场景中它并没有帮助我。“它不能是平滑的，没有反弹吗？”。。。在这种情况下，你有一个不同的问题。我刚刚回答了你的问题，做了同样的转换，但没有布斯效应。我建议你编辑你的问题，更好地解释你期望的解决方案。感谢你的帮助、工作和时间，兄弟，非常感谢你