Rendering React components via D3

react-d3.js

import { dropWhile, forOwn, find } from 'lodash';
import React from 'react/addons';
import { Col, Grid, Row } from 'react-bootstrap';
import Icon from './Icon.jsx';

const CSSTransitionGroup = React.addons.CSSTransitionGroup;

export default React.createClass({

    displayName: 'IconList',

    propTypes: {
        category: React.PropTypes.object.isRequired,
        maxIconCount: React.PropTypes.number,
        itemRenderer: React.PropTypes.func
    },

    getDefaultProps () {
        return {
            maxIconCount: 0,
            itemRenderer: Icon
        };
    },

    render () {
        return (
            <div>
                <h2>{ this.props.category.name }</h2>
                <div ref="list" className="IconList" />
            </div>
        );
    },

    componentDidMount () {
        this.componentDidUpdate();
    },

    componentDidUpdate () {
        var self = this;
        var icons = this.props.category.icons;

        if (this.props.maxIconCount) {
            icons = icons.slice(0, this.props.maxIconCount);
        }

        var el = d3.select(this.refs.list.getDOMNode());
        var $ = el.selectAll('.IconList__item')
            .data(icons);

        $.enter()
            .append('div')
            .attr({
                'class': 'IconList__item'
            })
            .style('opacity', 0)
            .call(transition, {
                style: { opacity: 1 }
            });

        $.each(function (item, i) {
            React.render(
                <self.props.itemRenderer
                    name={ item.name }
                    selector={ item.selector }
                    src={ item.src }
                    tags={ item.filter }
                    />
                ,
                this
            );
        });

        $.exit()
            .call(transition, {
                style: { opacity: 0 },
                remove: true
            });

        function transition ($, options) {
            var offset = dropWhile($[0]).length;
            var t = $
                .transition()
                .duration(1000)
                .delay((d, i) => Math.max(0, i - offset) * 100);

            forOwn(options, (value, key) => t[key](value));

            return t;
        }
    }

});