我试图用d3.js库动画折线图。最后，我会被异步从WebSocket的获取数据，而是例如起见，我只是用setInterval + getRandomInt组合。我需要新的数据追加到已知的数据，并相应更新图表。重要的是，我不想删除旧的数据 - 所有的历史将被无限期地显示在图表上。
我设法动画图表，但我的问题是，最近添加的项目（图的右端）是刚刚加入，没有任何动画。它只是看起来奇怪，我想解决这个问题。
我也许应该注意到，我想尽快显示最近的数据，因为它到达浏览器，以便藏匿的最后一个项目是不是一种选择。
<html>
<head>
<title>Simple Line Graph using SVG and d3.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
</head>
<body>
<script>
const margins = [80, 80, 80, 80]; // margins
const width = 1000 - margins[1] - margins[3]; // width
const height = 400 - margins[0] - margins[2]; // height
const svg = d3
.select("body")
.append("svg")
.attr("width", width + margins[1] + margins[3])
.attr("height", height + margins[0] + margins[2])
.append("svg:g")
.attr("transform", "translate(" + margins[3] + "," + margins[0] + ")");
const data = [1, 5, 2, 13, 0];
const x = d3.scale
.linear()
.domain([0, data.length])
.range([0, width]);
const y = d3.scale
.linear()
.domain([d3.min(data), d3.max(data)])
.range([height, 0]);
const lineFunction = d3.svg
.line()
.x((_, i) => x(i))
.y(d => y(d))
.interpolate("cardinal");
svg
.append("path")
.attr("d", lineFunction(data))
.attr("stroke-width", 5)
.attr("stroke", "red")
.attr("fill", "none");
setInterval(() => {
data.push(getRandomInt(1, 10));
x.domain([0, data.length]);
y.domain([d3.min(data), d3.max(data)]);
svg
.transition()
.duration(750)
.select("path")
.attr("d", lineFunction(data));
}, 1000);
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
</body>
</html>要解决这个最简单的方法，将可能复制的最后一个节点，然后将其转移到需要的地方去。但是，因为你靠的索引，您还需要为X的附加参数（否则你不能有两个点重叠）。
<html>
<head>
<title>Simple Line Graph using SVG and d3.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
</head>
<body>
<script>
const margins = [80, 80, 80, 80]; // margins
const width = 1000 - margins[1] - margins[3]; // width
const height = 400 - margins[0] - margins[2]; // height
const svg = d3
.select("body")
.append("svg")
.attr("width", width + margins[1] + margins[3])
.attr("height", height + margins[0] + margins[2])
.append("svg:g")
.attr("transform", "translate(" + margins[3] + "," + margins[0] + ")");
const data = [{
y: 10,
x: 0
}];
const x = d3.scale
.linear()
.domain([0, data.length])
.range([0, width]);
const y = d3.scale
.linear()
.domain([d3.min(data), d3.max(data)])
.range([height, 0]);
const lineFunction = d3.svg
.line()
.x((d, i) => x(i + d.x))
.y(d => y(d.y))
.interpolate("cardinal");
svg
.append("path")
.attr("d", lineFunction(data))
.attr("stroke-width", 5)
.attr("stroke", "red")
.attr("fill", "none");
setInterval(() => {
data.push({
y: data[data.length - 1].y,
x: 0
});
var path = svg
.select("path");
path
.datum(data)
.attr("d", lineFunction);
data[data.length - 1] = {
y: getRandomInt(1,10),
x: 1
};
x.domain([0, data.length]);
y.domain([d3.min(data, function(d) { return d.y; }),
d3.max(data, function(d) { return d.y; })]);
path
.datum(data)
.transition()
.duration(750)
.attr("d", lineFunction);
}, 1000);
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
</body>
</html>嗯，这是一个DIY的方法。我可能会看看这样虽然不是一个插件：qazxsw POI。