SVG.transition () path element - where to add?

Question

Basically, I want my chart to start on the x axis and increase by more than two seconds to the actual data values. This is probably a simple thing, but I can't get it to work.

I am adding a region element in which the d = "" attribute is created by a function (region), and I'm not sure where to add the transition.

At first I decided to do this in a function area, but it fails. I also tried to do this when an area element was added without success.

Here is my code:

// Create the area element for each object - a function that will be passed to "path" var area = d3.svg.area() .x(function(d) { return x(d.year); }) .y0(height) //.y1(height) //.transition() //.duration(2000) .y1(function(d) { return y(d.average); }); // build the container SVG element var svg = d3.select("#co2").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") svg.append("path") // pull in data to the path .datum(data) .attr("class", "area") // passing in the area function, for each object .attr("d", area) // starts the graph opacity at 0 and fades to 1 over 2.5 seconds .style("fill-opacity", "0") .transition() .duration(2500) .style("fill-opacity", "1"); 

Answer 1

Instead of trying to use the transition in the form of a region graph, you can apply the scale (x, y) for the whole svg element that you want to animate. The advantage of this approach is that it is not limited to a specific implementation implementation (for example: not path / d 3.area).

There are a few comments:

• To avoid the transition behavior (), while working on the field settings, make sure you have a separate "g" element for the transition transformations () to act on

• SVG has the origin (0,0) in the upper left corner, so in addition to scaling the SVG area, you need to set the base of the graph

This is shown below:

'g':

 var svg = d3.select("#co2").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left, "," + margin.top + ")") // define a new 'g' to scope the transition, and keep separate from the margin adjusting transform above .append("g"); 

transition (), including setting up the database:

 svg .attr("transform", "translate(0," + height + ") scale(1, 0)") .transition().duration(2000) .attr("transform", "translate(0,0) scale(1, 1)"); 

As always, this is best illustrated by a complete example: http://bl.ocks.org/4239516