Question

我有一个D3折线图，在加载时添加了一条线，在用户按下按钮后动态添加了两条线。第二行应从原始行过渡，第三行应从第二行完成过渡的位置过渡。我已经部分工作了，但是在过渡发生之前将最后一行绘制到位，然后在过渡开始时将其删除，这看起来很奇怪。如何修改代码，以使最终的过渡线在过渡之前不会绘制。原始行：

function drawAD(){

//setup  original line
var aggregateDemandLine = d3.line()
.x(function(d,i){return xScale(ADX[i])})
.y(function(d,i){return yScale(ADY[i])})

g.append("path")
.attr("class","AD1")
.attr("fill","none")
.attr("stroke","green")
.attr("stroke-width","3px")
.attr("d",aggregateDemandLine(ADX))
}

下面是添加带有过渡的第二和第三行的功能。

function accelerate(){
 var initial, accelerated;

var initialAD = d3.line()
.x(function(d,i){return xScale(ADX[i])})
.y(function(d,i){return yScale(initialADMoveY[i])})

g.append("path").attr("class","first").attr("d", function(){

initial = initialAD(ADX);
return initial;
}).attr("stroke","green")
.attr("stroke-width",3)
.attr("pointer-events","none")
.attr("class","first")

var acceleratedAD = d3.line()
.x(function(d,i){return xScale(ADX[i])})
.y(function(d,i){return yScale(acceleratedADY[i])})

g.append("path").attr("class","second").attr("d", function(){
accelerated = acceleratedAD(ADX)
return accelerated;
})
.attr("stroke","green")
.attr("stroke- width",3).attr("pointer-events","none")
.attr("class","second");

d3.select('.first')
.transition()
.duration(2000)
.attrTween('d', function (d) {

return d3.interpolateString(ADPath, initial);
}).on("end",secondTransition);

function secondTransition(){
 d3.select('.second')
 .transition()
 .duration(2000)
 .attrTween('d', function (d) {

 return d3.interpolateString(initial, accelerated);
 });
 }

Answer 1

num_params

在应用过渡之前，停止绘画的第一个路径的正确方法是什么？

1 个答案: