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.

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

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

.item--transitioning {
  fill: none;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://fb.me/react-with-addons-0.9.0.min.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() {
  React.renderComponent(
    React.addons.TransitionGroup(
      {
        transitionName: 'circles',
        component: React.DOM.svg,
        width: width,
        height: height
      },
      data.map(circle) 
    ),
    document.body
  );
}

var circlesCreated = 0;

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

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

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

</script>

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

Modified http://fb.me/react-with-addons-0.9.0.min.js to a secure url

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

https://fb.me/react-with-addons-0.9.0.min.js