luxifertran/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This example is the first of three in the Path Transitions tutorial.
When you interpolate a path element’s “d” attribute using transition.attr, the default interpolator is typically d3.interpolateString. This interpolator is not specialized for SVG paths, and instead simply looks for numbers embedded in strings. Numbers in the start and end strings are paired and then interpolated. So, the default behavior when interpolating two paths pairs numbers like this:
M x0, y0 L x1, y1 L x2, y2 L x3, y3
   ↓   ↓    ↓   ↓    ↓   ↓    ↓   ↓
M x0, y1 L x1, y2 L x2, y3 L x3, y4

The first point ⟨x0,y0⟩ is interpolated to ⟨x0,y1⟩. Since the x-values are the same for each pair of points, only the y-values change, and the path doesn’t slide left as intended.
For the correct behavior, see the next example.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  font: 10px sans-serif;
}

.line {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var n = 40,
    random = d3.random.normal(0, .2),
    data = d3.range(n).map(random);

var margin = {top: 20, right: 20, bottom: 20, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .domain([0, n - 1])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([-1, 1])
    .range([height, 0]);

var line = d3.svg.line()
    .x(function(d, i) { return x(i); })
    .y(function(d, i) { return y(d); });

var svg = d3.select("body").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("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + y(0) + ")")
    .call(d3.svg.axis().scale(x).orient("bottom"));

svg.append("g")
    .attr("class", "y axis")
    .call(d3.svg.axis().scale(y).orient("left"));

var path = svg.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line);

tick();

function tick() {

  // push a new data point onto the back
  data.push(random());

  // pop the old data point off the front
  data.shift();

  // redraw the line (with the wrong interpolation)
  path.transition()
      .duration(500)
      .ease("linear")
      .attr("d", line)
      .each("end", tick);

}

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	svg {
	font: 10px sans-serif;
	}

	.line {
	fill: none;
	stroke: #000;
	stroke-width: 1.5px;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var n = 40,
	random = d3.random.normal(0, .2),
	data = d3.range(n).map(random);

	var margin = {top: 20, right: 20, bottom: 20, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var x = d3.scale.linear()
	.domain([0, n - 1])
	.range([0, width]);

	var y = d3.scale.linear()
	.domain([-1, 1])
	.range([height, 0]);

	var line = d3.svg.line()
	.x(function(d, i) { return x(i); })
	.y(function(d, i) { return y(d); });

	var svg = d3.select("body").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("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + y(0) + ")")
	.call(d3.svg.axis().scale(x).orient("bottom"));

	svg.append("g")
	.attr("class", "y axis")
	.call(d3.svg.axis().scale(y).orient("left"));

	var path = svg.append("path")
	.datum(data)
	.attr("class", "line")
	.attr("d", line);

	tick();

	function tick() {

	// push a new data point onto the back
	data.push(random());

	// pop the old data point off the front
	data.shift();

	// redraw the line (with the wrong interpolation)
	path.transition()
	.duration(500)
	.ease("linear")
	.attr("d", line)
	.each("end", tick);

	}

	</script>