Transitions with React and D3 II

Using D3 in a React TransitionGroup to transition elements. D3 is used purely for transitions, not for data joins. The distinction between entering and exiting elements is handled by the TransitionGroup component. See the React documentation for further information.

Alternative implementations only with D3 and using React without addons.

Note: This implementation is around 30% slower in processing 1000 circles than the other two.

forked from herrstucki's block: Transitions with React and D3 II

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  background: #fff;
}

.item {
  fill: #333;
  stroke-width: 1.5;
}

.item--transitioning {
  fill: none;
}
</style>
<body>
  <div id="react-root"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://fb.me/react-with-addons-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script>
var width = 960,
    height = 500,
    data = [];

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

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

var r = d3.scale.sqrt()
  .domain([0, 1])
  .range([0, 30]);

function render() {
  var Circle = React.createFactory(circle)
  var circles = data.map(Circle);
	var Group = React.createFactory(React.addons.TransitionGroup);
  var group = Group(
    {
      transitionName: 'circles',
      component: 'svg',
      width: width,
      height: height
    },
    circles
  );
 
  ReactDOM.render(
    group,
    document.getElementById("react-root")
  );
}

var circlesCreated = 0

function add() {
  data.push({key: Date.now(), x: Math.random(), y: Math.random(), r: Math.random()});
  render();
  requestAnimationFrame(data.length < 100 ? add : remove);
}

function remove() {
  data = data.slice(1);
  render();
  if (++circlesCreated === 1000) console.timeEnd('1000 circles');
  requestAnimationFrame(data.length > 0 ? remove : add);
}

console.time('1000 circles');
add();

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://fb.me/react-with-addons-15.2.0.js

https://fb.me/react-dom-15.2.0.js