Javascript D3转变。在折线图上处理多行，并希望在按下按钮时在各行之间平滑过渡

我有一个用d3编写的小折线图，我希望它的行为方式是，当图形打开时，一个svg线路径是可见的，然后当用户单击按钮时，我希望现有的svg线路径平滑地过渡到表示一个新的稍微不同的数据集的线路径

我可以很好地转换常规属性，但正是转换“d”属性让我感到困惑。代码在这里

var w=500；
var h=300；
var=30；
变量数据集=[
[1.3, 2015],
[2.1, 2036.25],
[3.4, 2057.5],
[3.5, 2057.5],
[4, 2100]
];
//创建比例函数
var yScale=d3.scale.linear（）
.domain（[0，4]）
.范围（[h-填充，填充]）；
var xScale=d3.scale.linear（）
.域名（[2015，2100]）
.范围（[填充，w-填充*2]）；
//定义X轴
var xAxis=d3.svg.axis（）
.scale（xScale）
.东方（“底部”）；
//定义Y轴
var yAxis=d3.svg.axis（）
.刻度（yScale）
.东方（“左”）；
//创建SVG元素
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var lineFunc=d3.svg.line（）
.x（功能（d）{
返回xScale（d[1]）；
})
.y（功能（d）{
返回yScale（d[0]）；
})
.插入（“线性”）；
append（'svg:path'）
.transition（）
.attr（'d'，lineFunc（数据集））
.attr（'class'，'dataline'）；
//创建X轴
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移（0）”+（h-填充）+”）
.呼叫（xAxis）；
//创建Y轴
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“转换”、“转换”（+padding+”，0）”）
.呼叫（yAxis）；
//创建事件侦听器和数据重置函数
d3.选择（“按钮”）
.on（“单击”，函数（）{
数据集=[
[1, 2015],
[2.05, 2036.25],
[3.25, 2057.5],
[3.3, 2057.5],
[3.7, 2100]
];
var dynamoBar=svg.append（'svg:path'）
.transition（）
.attr（“d”，lineFunc（数据集））
.attr（“类”、“数据线”）；
})

。轴路径，
.轴线{
填充：黑色；
中风：无；
形状渲染：边缘清晰；
}
.轴文本{
字体系列：无衬线；
字体大小：11px；
}
.数据线{
笔画：紫色；
笔画宽度：1；
填充：无；
}

试试看

当您选择要使用新数据转换的行时（单击按钮后），您正在创建一个新的

路径

：

var dynamoBar = svg.append('svg:path')...

而是选择现有路径：

var dynamoBar = svg.select('.dataline')...

---

看这把小提琴：

回答得很好。我刚看到。通过这个代码段svg.append（“g”）.attr（“class”、“axis”）.attr（“transform”、“translate”（+padding+”，0）”）找到了类似的解决方案；转换为变量，然后转换该变量。你就是亨利