我使用 D3 V5 创建了此图表。另外，我已在小提琴上附加了示例数据，您可以点击此处查看 https://plnkr.co/edit/pINxcS9yt9AuJmSk02Fs?p=preview.
我已经包括了tick函数代码块，它在向左滑动的路径上附加 x 和 y 比例以及线/数据的新域：
当tick函数执行时，线条会重建，使其看起来像是弹跳的。
重建线路的时候怎么能流畅，一点弹跳都没有呢？
var tr = d3
.transition()
.duration(obj.tick.duration)
.ease(d3.easeLinear);
function tick() {
return setInterval(function() {
var newData = [];
var tickFunction = obj.tick.fnTickData;
if (tickFunction !== undefined && typeof tickFunction === "function") {
newData = tickFunction();
for (var i = 0; i < newData.length; i++) {
obj.data.push(newData[i]);
}
}
if (newData.length > 0) {
var newMaxDate, newMinDate, newDomainX;
if (isKeyXDate) {
newMaxDate = new Date(
Math.max.apply(
null,
obj.data.map(function(e) {
return new Date(e[obj.dataKeys.keyX]);
})
)
);
newMinDate = new Date(
Math.min.apply(
null,
obj.data.map(function(e) {
return new Date(e[obj.dataKeys.keyX]);
})
)
);
newDomainX = [newMinDate, newMaxDate];
} else {
newDomainX = [
d3.min(obj.data, function(d) {
return d[obj.dataKeys.keyX];
}),
d3.max(obj.data, function(d) {
return d[obj.dataKeys.keyX];
})
];
}
// update the domains
//x.domain([newMinDate, newMaxDate]);
if (obj.tick.updateXDomain) {
newDomainX = obj.tick.updateXDomain;
}
x.domain(newDomainX);
if (obj.tick.updateYDomain) {
y.domain(obj.tick.updateYDomain);
}
path.attr("transform", null);
// slide the line left
if (obj.area.allowArea) {
areaPath.attr("transform", null);
areaPath
.transition()
.transition(tr)
.attr("d", area);
}
path
.transition()
.transition(tr)
.attr("d", line);
svg
.selectAll(".x")
.transition()
.transition(tr)
.call(x.axis);
svg
.selectAll(".y")
.transition()
.transition(tr)
.call(y.axis);
// pop the old data point off the front
obj.data.shift();
}
}, obj.tick.tickDelay);
}
this.interval = tick();
That bounce实际上是转换时的预期结果d属性，它只是一个字符串。
这里有几种解决方案。无需过多重构代码，一种简单的方法是使用pathTweenMike Bostock 在这个 bl.ocks 中编写的函数：https://bl.ocks.org/mbostock/3916621 https://bl.ocks.org/mbostock/3916621。在这里，我对其进行了一些更改，以便您可以传递数据，如下所示：
path.transition()
.transition(tr)
.attrTween("d", function(d) {
var self = this;
var thisd = line(d);
return pathTween(thisd, 1, self)()
})
这是分叉的 plunker：https://plnkr.co/edit/aAqpdSb9JozwHsErpqa9?p=preview https://plnkr.co/edit/aAqpdSb9JozwHsErpqa9?p=preview
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
