How to animate areas of a D3 chart?

Question

How can d3 areas revitalize their transitions? I saw examples for strings, but I can’t find anything when animating the area.

For example, the area:

var area = d3.svg.area() .x(function(d) { return x(dx); }) .y0(height) .y1(function(d) { return y(dy); }); 

Update: I found an example for an area chart, but I do not understand this. How does this function create a region transition?

 function transition() { d3.selectAll("path") .data(function() { var d = layers1; layers1 = layers0; return layers0 = d; }) .transition() .duration(2500) .attr("d", area); } 

Answer 1

The areas transition works the same way as for other attributes. Only in the case of regions do we interpolate strings instead of interpolating numbers. When you call the area function with some data , then it creates a line that looks like M0,213L4,214L9,215 ... L130,255.7 , which is the DSL used for the d attribute . When you change the data , you go to the area function, this line changes, and D3 interpolates them.

As for the example you found, the interesting bit that causes the transition is just:

  .transition() .duration(2500) .attr("d", area); 

The other part is just a fantastic way to alternatively return layers1 and layers0 as data for the area function in successive calls.

  d3.selectAll("path") .data(function() { var d = layers1; layers1 = layers0; return layers0 = d; }) 

Answer 2

Beat was late for the party, but:

I solved the problem by changing the original 'area' function, passing in two variables: data and the field I want to display:

 var area = function(datum, field) { return d3.svg.area() .x(function(d) { return xScale(d.period_end); }) .y0(height) .y1(function(d) { return yScale(d[field] || 0); })(datum); }; 

Then, when you draw the path, just use the base transition. The first time, skipping the "field", as a result, getting zero values, and then - after the transition () - passing the desired field:

 areaChart.append('path') .attr('class', 'area') .attr('d', area(chartData)) .attr('fill', function() { return chartColor; }) .attr('opacity', 0.15) .transition().duration(chartSettings.duration) .attr('d', area(chartData, 'value')); 

Works well without the need for additional features. Of course, the same can be done for linear diagrams.

Answer 3

Thanks @neptunemo for your suggestion. However, your code is too specific for your problem. I would like to give a general example to better illustrate your idea:

Please view the full code from the d3noob example: https://bl.ocks.org/d3noob/119a138ef9bd1d8f0a8d57ea72355252

Original area generator code:

 var area = d3.area() .x(function(d) { return x(d.date); }) .y0(height) .y1(function(d) { return y(d.close); }); 

Modified area generator code:

 var area = function(datum, boolean) { return d3.area() .y0(height) .y1(function (d) { return y(d.close); }) .x(function (d) { return boolean ? x(d.date) : 0; }) (datum); } 

• datum - receive data
• boolean - manage:
  • .x() (if you want animation along the x axis)
  • .y1() (if you want animation along the y axis)

By setting boolean to false , we can set .x() or .y1() to 0 .

This will help us establish the initial state of the region before starting the transition process.

Modified Area Transition Code:

 svg.append("path") .data([data]) .attr("class", "area") .attr("d", d => area(d, false)) .attr("fill", "lightsteelblue") .transition() .duration(2000) .attr("d", d => area(d,true)); 

Effects?

• control case .x()

• control case .y1()

Note The problem I am facing is that I cannot synchronize the animation of the row and region :(