D3.js 用D3绘制实时散点图。很难处理数据连接
对于我的一个项目，我想使用D3创建一个实时散点图。采样率需要大约为每秒30次更新。我设法创建了一个自我更新的图表，但我面临两个问题： 1） 我不知道如何使用exit（）和remove（）函数删除数据 2） 这一页很快就冻结了 我还想知道这是否是创建实时散点图的最有效方法。我已经改编了源代码 我看了所有的博客和教程都没有用。任何帮助都将不胜感激。谢谢 编辑：根据rioV8的建议，我将脚本移植到d3.v5。有些事情改变了，但问题是一样的。如果你能给我建议如何使这个实时散点图工作，那将是惊人的。我意识到在互联网上没有这样的图形，只有线图。谢谢 这是我的密码D3.js 用D3绘制实时散点图。很难处理数据连接,d3.js,real-time,scatter-plot,D3.js,Real Time,Scatter Plot,对于我的一个项目，我想使用D3创建一个实时散点图。采样率需要大约为每秒30次更新。我设法创建了一个自我更新的图表，但我面临两个问题： 1） 我不知道如何使用exit（）和remove（）函数删除数据 2） 这一页很快就冻结了 我还想知道这是否是创建实时散点图的最有效方法。我已经改编了源代码 我看了所有的博客和教程都没有用。任何帮助都将不胜感激。谢谢 编辑：根据rioV8的建议，我将脚本移植到d3.v5。有些事情改变了，但问题是一样的。如果你能给我建议如何使这个实时散点图工作，那将是惊人的。我意识
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.line {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v5.js"></script>
<script>
var n = 40,
random = d3.randomNormal(0, .2)
var data = [{x:10,y:Math.random()},{x:15,y:Math.random()},{x:20,y:Math.random()},{x:25,y:Math.random()}];
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 20, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleLinear()
.domain([0, n - 1])
.range([0, width]);
var y = d3.scaleLinear()
.domain([0, 1])
.range([height, 0]);
g.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + y(0) + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y));
var points = svg.selectAll("dot")
.data(data)
points.enter().append("circle")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); })
.transition()
.duration(500)
.ease(d3.easeLinear)
.on("start", tick);
points.exit().remove();
function tick() {
// Push a new data point onto the back.
data = [{x:10,y:Math.random()},{x:15,y:Math.random()},{x:20,y:Math.random()},{x:25,y:Math.random()}];
// Redraw the line.
console.log("bob")
points.data(data).enter().append("circle")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); })
.transition()
.duration(500)
.ease(d3.easeLinear)
.on("start", tick);
}
</script>
.线路{
填充：无；
行程：#000；
笔划宽度：1.5px；
}
var n=40，
random=d3.randomNormal（0.2）
var data=[{x:10，y:Math.random（）}，{x:15，y:Math.random（）}，{x:20，y:Math.random（）}，{x:25，y:Math.random（）}]；
var svg=d3。选择（“svg”），
边距={顶部：20，右侧：20，底部：20，左侧：40}，
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
g=svg.append（“g”）.attr（“transform”、“translate”（+margin.left+）、“+margin.top+”）；
var x=d3.scaleLinear（）
.domain（[0，n-1]）
.范围（[0，宽度]）；
变量y=d3.scaleLinear（）
.domain（[0，1]）
.范围（[高度，0]）；
g、 附加（“defs”）。附加（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
g、 附加（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）、+y（0）+”）
.call（d3.axisBottom（x））；
g、 附加（“g”）
.attr（“类”、“轴--y”）
.调用（d3.左（y））；
var points=svg.selectAll（“点”）
.数据（数据）
points.enter（）.append（“圆”）
.attr（“r”，3.5）
.attr（“cx”，函数（d）{返回x（d.x）；}）
.attr（“cy”，函数（d）{返回y（d.y）；}）
.transition（）
.持续时间（500）
.ease（d3.easeLinear）
。开启（“开始”，勾选）；
points.exit（）.remove（）；
函数tick（）{
//将新数据点推到后面。
data=[{x:10，y:Math.random（）}，{x:15，y:Math.random（）}，{x:20，y:Math.random（）}，{x:25，y:Math.random（）}]；
//重新画线。
console.log（“bob”）
points.data（data.enter（）.append（“圆”）
.attr（“r”，3.5）
.attr（“cx”，函数（d）{返回x（d.x）；}）
.attr（“cy”，函数（d）{返回y（d.y）；}）
.transition（）
.持续时间（500）
.ease（d3.easeLinear）
。开启（“开始”，勾选）；
}
转换的退出xxscatterplotx.domainclipPath