D3.js D3：数据点数量变化时的转换路径
每当数据更新时，我尝试在D3.js D3：数据点数量变化时的转换路径,d3.js,D3.js,每当数据更新时，我尝试在D3（v5）中设置路径动画。多亏了这个例子，我成功地通过转换做到了这一点 但是，当新数据集包含的数据点多于前一个数据集时，这种行为是奇怪的。更新数据时，现有路径会挤压到图表的左侧，而新数据点会立即显示（无动画）。这会导致非常混乱和混乱的结果，尤其是如果图表中有多条线（下面的示例已简化） 有没有办法改善这一点？理想情况下，路径不应挤压到左侧，而应在当前位置更新数据点。或者，我们可以设置任何“新”点的动画，使它们从底部向上移动，这对眼睛来说会更柔和，但我还没有找到只设置新点
D3//创建2个数据集
变量数据1=[{
ser1:0.3，
ser2:4
},
{
ser1:2，
ser2:16
},
{
ser1:3，
ser2:8
},
{
ser1:4，
ser2:6
},
{
ser1:5，
ser2:8
},
{
ser1:6，
ser2:10
},
{
ser1:7，
ser2:6
}
];
变量数据2=[{
ser1:1，
ser2:7
},
{
ser1:4，
ser2:1
},
{
ser1:6，
ser2:8
}
];
//设置图形的尺寸和边距
var保证金={
前10名，
右:30,，
底数：30，
左：50
},
宽度=460-margin.left-margin.right，
高度=400-margin.top-margin.bottom；
//将svg对象附加到页面主体
var svg=d3。选择（“我的数据维”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//初始化X轴：
var x=d3.scaleLinear（）.range（[0，width]）；
var xAxis=d3.axisBottom（）.scale（x）；
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.attr（“类”、“myXaxis”）
//初始化Y轴
变量y=d3.scaleLinear（）.range（[height，0]）；
var yAxis=d3.axisLeft（）.scale（y）；
svg.append（“g”）
.attr（“类”、“粘虫”）
//创建将数据集作为输入的函数并更新绘图：
功能更新（数据）{
//创建X轴：
x、 域（[0，d3.max（数据，函数（d））{
返回d.ser1
})]);
svg.selectAll（“.myXaxis”）.transition（）
.持续时间（1000）
.呼叫（xAxis）；
//创建Y轴
y、 域（[0，d3.max（数据，函数（d））{
返回d.ser2
})]);
svg.selectAll（“.myYaxis”）
.transition（）
.持续时间（1000）
.呼叫（yAxis）；
//创建更新选择：绑定到新数据
var u=svg.selectAll（“.lineTest”）
.数据（[数据]，函数（d）{
返回d.ser1
});
//更新线路
U
.输入（）
.append（“路径”）
.attr（“类”、“行测试”）
.合并（u）
.transition（）
.持续时间（1000）
.attr（“d”，d3.line（）
.x（功能（d）{
返回x（d.ser1）；
})
.y（功能（d）{
返回y（d.ser2）；
})
.curve（d3.curveMonotoneX））
.attr（“填充”、“无”）
.attr（“笔划”、“钢蓝”）
.attr（“笔划宽度”，2.5）
}
//开始时，我对第一个数据集运行update函数：
更新（数据1）
数据集1
数据集2