Question

我有一个动画折线图，可以跟踪比赛中的一些数据。我一直在尝试使用d3.ease

在图表上的点之间更改动画。

此刻我的代码显示为：

path
		.attr("stroke-dasharray", totalLength + " " + totalLength)
		.attr("stroke-dashoffset", totalLength)
	.transition() // Call Transition Method
		.duration(31000) // Set Duration timing (ms)
		.ease(d3.easeLinear) // Set Easing option
		.attr("stroke-dashoffset", 0); // Set final value of dash-offset for transition
});

但是，无论何时我更改.ease（d3.easeLinear），更改都将应用于整个路径，即不应用于点之间的过渡。

我想将以下功能应用于宽松政策：

easing={linear:function(t){return t},swing:function(t){return.5-Math.cos(t*Math.PI)/2},_default:"swing"}

感谢您提供的任何帮助：

codepen：https://codepen.io/MrVincentRyan/pen/xmZeyw

Answer 1

简单的方法是将路径分成N个部分，并以给定的延迟为每个部分设置动画

要获得流畅的线条，您可以在动画末尾删除所有线条部分，然后重新添加1-path版本。

可以使用1路径版本完成，但这需要非常复杂的内插器。没有人会相信这是您的第一个D3项目。

var dataset = [
{date: "08/01/2016", GBPUSD:1.45176},
{date: "15/01/2016", GBPUSD:1.42531},
{date: "22/01/2016", GBPUSD:1.4264},
{date: "29/01/2016", GBPUSD:1.4245},
{date: "05/02/2016", GBPUSD:1.45},
{date: "12/02/2016", GBPUSD:1.4502},
{date: "19/02/2016", GBPUSD:1.4405},
{date: "26/02/2016", GBPUSD:1.3869},
{date: "04/03/2016", GBPUSD:1.4227},
{date: "11/03/2016", GBPUSD:1.43829},
{date: "18/03/2016", GBPUSD:1.448},
{date: "25/03/2016", GBPUSD:1.4153},
{date: "01/04/2016", GBPUSD:1.4225},
{date: "08/04/2016", GBPUSD:1.4125},
{date: "15/04/2016", GBPUSD:1.4194},
{date: "22/04/2016", GBPUSD:1.4401},
{date: "29/04/2016", GBPUSD:1.4614},
{date: "06/05/2016", GBPUSD:1.44286},
{date: "13/05/2016", GBPUSD:1.43567},
{date: "20/05/2016", GBPUSD:1.44974},
{date: "27/05/2016", GBPUSD:1.4617},
{date: "03/06/2016", GBPUSD:1.45129},
{date: "10/06/2016", GBPUSD:1.4254},
{date: "17/06/2016", GBPUSD:1.4356},
{date: "24/06/2016", GBPUSD:1.3679},
{date: "01/07/2016", GBPUSD:1.3262},
{date: "08/07/2016", GBPUSD:1.2946},
{date: "15/07/2016", GBPUSD:1.3189},
{date: "22/07/2016", GBPUSD:1.31114},
{date: "29/07/2016", GBPUSD:1.3228},
{date: "05/08/2016", GBPUSD:1.3071},
{date: "12/08/2016", GBPUSD:1.29158},
{date: "19/08/2016", GBPUSD:1.30747},
{date: "26/08/2016", GBPUSD:1.3137},
{date: "02/09/2016", GBPUSD:1.3293},
{date: "09/09/2016", GBPUSD:1.3269},
{date: "16/09/2016", GBPUSD:1.3},
{date: "23/09/2016", GBPUSD:1.2968},
{date: "30/09/2016", GBPUSD:1.2962},
{date: "07/10/2016", GBPUSD:1.24346},
{date: "14/10/2016", GBPUSD:1.2189},
{date: "21/10/2016", GBPUSD:1.2245},
{date: "28/10/2016", GBPUSD:1.2191},
{date: "04/11/2016", GBPUSD:1.2517},
{date: "11/11/2016", GBPUSD:1.26},
{date: "18/11/2016", GBPUSD:1.2343},
{date: "25/11/2016", GBPUSD:1.2475},
{date: "02/12/2016", GBPUSD:1.27315},
{date: "09/12/2016", GBPUSD:1.2576},
{date: "16/12/2016", GBPUSD:1.2489},
{date: "23/12/2016", GBPUSD:1.2277},
{date: "30/12/2016", GBPUSD:1.2338},
{date: "06/01/2017", GBPUSD:1.2287},
{date: "13/01/2017", GBPUSD:1.2175},
{date: "20/01/2017", GBPUSD:1.2364},
{date: "27/01/2017", GBPUSD:1.2551},
{date: "03/02/2017", GBPUSD:1.2486},
{date: "10/02/2017", GBPUSD:1.249},
{date: "17/02/2017", GBPUSD:1.2411},
{date: "24/02/2017", GBPUSD:1.2467},
{date: "03/03/2017", GBPUSD:1.2294},
{date: "10/03/2017", GBPUSD:1.217},
{date: "17/03/2017", GBPUSD:1.2398},
{date: "24/03/2017", GBPUSD:1.2474},
{date: "31/03/2017", GBPUSD:1.2543},
{date: "07/04/2017", GBPUSD:1.2372},
{date: "14/04/2017", GBPUSD:1.2521},
{date: "21/04/2017", GBPUSD:1.2812},
{date: "28/04/2017", GBPUSD:1.2948},
{date: "05/05/2017", GBPUSD:1.2979},
{date: "12/05/2017", GBPUSD:1.28858},
{date: "19/05/2017", GBPUSD:1.3034},
{date: "26/05/2017", GBPUSD:1.2805},
{date: "02/06/2017", GBPUSD:1.289},
{date: "09/06/2017", GBPUSD:1.2743},
{date: "16/06/2017", GBPUSD:1.278},
{date: "23/06/2017", GBPUSD:1.2717},
{date: "30/06/2017", GBPUSD:1.3027},
{date: "07/07/2017", GBPUSD:1.2892},
{date: "14/07/2017", GBPUSD:1.3095},
{date: "21/07/2017", GBPUSD:1.2995},
{date: "28/07/2017", GBPUSD:1.3134},
{date: "04/08/2017", GBPUSD:1.30349},
{date: "11/08/2017", GBPUSD:1.3011},
{date: "18/08/2017", GBPUSD:1.2872},
{date: "25/08/2017", GBPUSD:1.2886},
{date: "01/09/2017", GBPUSD:1.2949},
{date: "08/09/2017", GBPUSD:1.3198},
{date: "15/09/2017", GBPUSD:1.3592},
{date: "22/09/2017", GBPUSD:1.3492},
{date: "29/09/2017", GBPUSD:1.3396},
{date: "06/10/2017", GBPUSD:1.3064},
{date: "13/10/2017", GBPUSD:1.3286},
{date: "20/10/2017", GBPUSD:1.3195},
{date: "27/10/2017", GBPUSD:1.3127},
{date: "03/11/2017", GBPUSD:1.3078},
{date: "10/11/2017", GBPUSD:1.3188},
{date: "17/11/2017", GBPUSD:1.3211},
{date: "24/11/2017", GBPUSD:1.3337},
{date: "01/12/2017", GBPUSD:1.3471},
{date: "08/12/2017", GBPUSD:1.3385},
{date: "15/12/2017", GBPUSD:1.332},
{date: "22/12/2017", GBPUSD:1.3358},
{date: "29/12/2017", GBPUSD:1.3514},
{date: "05/01/2018", GBPUSD:1.3568},
{date: "12/01/2018", GBPUSD:1.3732},
{date: "19/01/2018", GBPUSD:1.3858},
{date: "26/01/2018", GBPUSD:1.4169},
{date: "02/02/2018", GBPUSD:1.4122},
{date: "09/02/2018", GBPUSD:1.3829},
{date: "16/02/2018", GBPUSD:1.4027},
{date: "23/02/2018", GBPUSD:1.3966},
{date: "02/03/2018", GBPUSD:1.3806},
{date: "09/03/2018", GBPUSD:1.3852},
{date: "16/03/2018", GBPUSD:1.3942},
{date: "23/03/2018", GBPUSD:1.4136},
{date: "30/03/2018", GBPUSD:1.4015},
{date: "06/04/2018", GBPUSD:1.4086},
{date: "13/04/2018", GBPUSD:1.4241},
{date: "20/04/2018", GBPUSD:1.4003},
{date: "27/04/2018", GBPUSD:1.3779},
{date: "04/05/2018", GBPUSD:1.3534},
{date: "11/05/2018", GBPUSD:1.3545},
{date: "18/05/2018", GBPUSD:1.347},
{date: "25/05/2018", GBPUSD:1.3307},
{date: "01/06/2018", GBPUSD:1.3345},
{date: "08/06/2018", GBPUSD:1.341},
{date: "15/06/2018", GBPUSD:1.3278},
{date: "22/06/2018", GBPUSD:1.3267},
{date: "29/06/2018", GBPUSD:1.3208},
{date: "06/07/2018", GBPUSD:1.3284},
{date: "13/07/2018", GBPUSD:1.3229},
{date: "20/07/2018", GBPUSD:1.3138},
{date: "27/07/2018", GBPUSD:1.3105},
{date: "03/08/2018", GBPUSD:1.3},
{date: "10/08/2018", GBPUSD:1.2768},
{date: "17/08/2018", GBPUSD:1.2755},
{date: "24/08/2018", GBPUSD:1.2844},
{date: "31/08/2018", GBPUSD:1.296},
{date: "07/09/2018", GBPUSD:1.292},
{date: "14/09/2018", GBPUSD:1.3069},
{date: "21/09/2018", GBPUSD:1.3072},
{date: "28/09/2018", GBPUSD:1.3029},
{date: "05/10/2018", GBPUSD:1.3122},
{date: "12/10/2018", GBPUSD:1.3153},
{date: "19/10/2018", GBPUSD:1.3071},
{date: "26/10/2018", GBPUSD:1.2832},
{date: "02/11/2018", GBPUSD:1.2981},
{date: "09/11/2018", GBPUSD:1.2977},
{date: "16/11/2018", GBPUSD:1.284},
{date: "23/11/2018", GBPUSD:1.2821},
{date: "30/11/2018", GBPUSD:1.2751},
{date: "07/12/2018", GBPUSD:1.27188},
{date: "08/12/2018", GBPUSD:1.273099},
];

var multiDataset = d3.range(dataset.length-1).map( i => [dataset[i], dataset[i+1] ] );

// Calculate Margins and canvas dimensions
var margin = {top: 40, right: 40, bottom: 40, left: 60},
    width = 700 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

//Parsers and Formaters
var parseTime = d3.timeParse("%d/%m/%Y");
var formatTime = d3.timeFormat("%a/%b/%Y");

// Scales
var x = d3.scaleTime()
    .range([0, width]);

var y = d3.scaleLinear()
    .range([height, 0]);

// Line
var line = d3.line()
    .x(function(d) { return x(this.parseTime(d.date)).toFixed(1); })
    .y(function(d) { return y(d.GBPUSD).toFixed(1); })

var svg = d3.select("body").append("svg")
    .style("background-color", '#')
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 //Arguments for axes : Ranges for X, y
 x.domain(d3.extent(dataset, function(d) { return parseTime(d.date); }));
 y.domain(d3.extent(dataset, function(d) { return d.GBPUSD; }));

// Axes
svg.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

svg.append("g")
    .attr("class", "axis axis--y")
    .call(d3.axisLeft(y));
  // Labels
svg.append("text")
    .attr("text-anchor", "middle")
    .style("font-size", "14px")
    .attr("transform", "translate("+ (margin.left - 94 ) +","+(height/2)+")rotate(-90)")
    .text("Value of the Pound");

svg.append("text")
    .style("font-size", "14px")
    .attr("text-anchor", "middle")
    .attr("transform", "translate("+ (width/2) +","+(height-(margin.bottom -74))+")")
    .text("Date");

//  Chart Title
svg.append("text")
    .attr("x", (width / 2))
    .attr("y", 20 - (margin.top / 2))
    .attr("text-anchor", "middle")
    .style("font-size", "16px")
    .text("Weekly USD/GBP since 01/01/2016");

// Data Lines:

d3.select("#start").on("click", function() {
  var path = svg.selectAll(".line")
    .data(multiDataset)
    .enter()
    .append("path")
      .attr("class", "line")
      .attr("d", line);

  path.each( function (d,i) { d.totalLength = this.getTotalLength(); })

var segmentDuration = 31000/multiDataset.length;
  path
      .attr("stroke-dasharray", d => d.totalLength + " " + d.totalLength)
      .attr("stroke-dashoffset", d => d.totalLength)
    .transition() // Call Transition Method
      .duration(segmentDuration) // Set Duration timing (ms)
      .delay( (d,i) => i*segmentDuration)
      .ease(d3.easeExp)
      .attr("stroke-dashoffset", 0); // Set final value of dash-offset for transition
});

// Reset Animation
d3.select("#reset").on("click", function() {
  d3.selectAll(".line").remove();
});

body{
background-color: white;
font-family: arial, sans-serif;
font-size: 20px;
padding: 10px;
}
.axis {
  font: 10px sans-serif;
}
.axis path,
.axis line {
  fill: none;
/*   stroke: tomato; */
  shape-rendering: crispEdges;
}
.line {
  fill: none;
  stroke: red;
  stroke-width: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<button id="start">Start</button>
<button id="reset">Reset</button>

点之间的动画的D3缓动功能

1 个答案: