RD3.jsx

import React, {Component, PropTypes} from 'react';
import {component as Button}  from 'focus-components/common/button/action'
import d3 from 'd3' // Is it working?

const defaultProps = {
    margin: {top: -5, right: -5, bottom: -5, left: -5},
    width: 960,
    height: 500,
    plan: '<svg><path></path></svg>',
    zoomFunction(){
            this._d3Select('svg').selectAll('polyline').attr('transform', 'translate(' + d3.event.translate  + ')scale(' + d3.event.scale + ')');
    },
    colorOneElement: {},
    isZoom: true,
    firstIndicator: [],
    secondIndicator: [],
    actifPolygon:{},
    layer: [],
    x:0,
    zoom:d3.behavior.zoom(),
    y:0
};

const propTypes = {
    margin: PropTypes.object,
    width: PropTypes.number,
    height: PropTypes.number,
    onClickPath: PropTypes.func,
    canvas: PropTypes.object,
    plan: PropTypes.string,
    colorOneElement: PropTypes.object,
    isZoom: PropTypes.boolean,
    zoomFunction: PropTypes.func,
    layer: PropTypes.array

};

/**
 * SVG.
 */
class Svg extends Component {

    componentDidUpdate = () => {
        this._registerOnClickPath();
        this._onZoom();
        this._onColorOne();
        this._onColorAll();
        this._removeLayer();
        this._renderActifPolygon();
        this._scaleIndicatorOne ();
        this._manualZoom ();
    }
    _convertPlan() {
        return {__html: this.props.plan};
    }

    _registerOnClickPath() {
        let canvas = this._d3Select().selectAll('polyline')
            .on('click', this.props.registerOnClickPath);
    }

    _onZoom() {
        const {margin, width, height,zoomFunction, isZoom, zoom} = this.props;
        const {top, bottom} = margin;
        let zoomOn = zoom;
        // explain why
        if (isZoom) {
            zoomOn = zoom
                .scaleExtent([1, 5])
                .on('zoom', this._zoomEncapsulation());
                
        }
        // Explain use
        this._d3Select()
            .attr('width', width)
            .attr('height', height + top + bottom)
            .call(zoomOn);
    }

    _onColorOne() {
        const {colorOneElement} = this.props;
        if (!_.isEmpty(colorOneElement)) {
            let colorElement = this._d3Select().select('#' + colorOneElement.id)
                .style('fill-stroke', colorOneElement.color)
        }
    }

    _renderActifPolygon() {
        const {actifPolygon, beforePolygon} = this.props;
        if(beforePolygon){
            var test =this._d3Select().select('[atlas-polygon-name="'+ beforePolygon.id + '"]')
                .style('stroke','none').style('stroke-width', 'none');
        }
        if (!_.isEmpty(actifPolygon)) {
            this._d3Select().select('[atlas-polygon-name="'+ actifPolygon.id + '"]')
                .style('stroke-width', '1').style('stroke','black');

        }
    }

    _onColorAll() {
        const {colorAll} = this.props;
        if (colorAll !== {}) {
            let legendSvg = this._d3Select().append('div').style('max-width', 500);
            for (let legende in colorAll) {
                let color = colorAll[legende].color;
                let name = colorAll[legende].name;
                for (let element in colorAll[legende].elements) {
                    let colorElement = this._d3Select().select('#' + colorAll[legende].elements[element])
                        .style('fill', color)
                }
            }
        }
    }
    _removeLayer(){
        const {layer} = this.props;
        var _this = this;
        _this._d3Select().selectAll('g[atlas-layer-name]').style('display', '');
        if(layer !== []){
            layer.map(function(layerName){
                _this._d3Select().select('g[atlas-layer-name='+ layerName +']').style('display', 'none');
            });
        }
    }

    _d3Select() {
        return d3.select(this.refs.svgPlan);
    }

    _scaleIndicatorOne (){
        const {data} = this.props;
        if(data){
            var tableau = [178];
            var colorScale=d3.scale.linear()
                .domain([0,1,2,3,4,5])
                .range(["#0057b8",'#156dd1', '#3785de','#5ea0eb',"#88bcf7"]);
            for(var n=0; n<data.length; n++){
                const IdTech = data[n].id;
                tableau[IdTech -1] = data[n];
            }
            this._d3Select('[atlas-layer-name="atlas-polygon-layer"]').selectAll('polyline').data(tableau).enter()
            this._d3Select('[atlas-layer-name="atlas-polygon-layer"]').selectAll('polyline').style('fill',
                function(d){
                    if(d == _.find(tableau, d)){
                        var value = d.value;
                        return colorScale(value)
                    }
                })
        }
    }
    _zoomEncapsulation(){
        return () => {
            var scale;
            if(d3.event.deltaY >0){
                scale = Math.max(d3.event.scale, this.props.scale);
            }else {
                scale = d3.event.scale;
            }

            var translate = [d3.event.translate[0] , d3.event.translate[1]]
            if(d3.event.translate[0] > 0 && d3.event.translate[1] > 0) {
                this._d3Select('svg').selectAll('polyline').attr('transform', 'translate(' + [Math.min(translate[0] , (1463)/2), Math.min(translate[1], (761)/2)] + ')scale(' + scale + ')');
                this.props.setParamZoom(scale, [Math.min(translate[0], (1463)/2), Math.min(translate[1], (761)/2)]);
            }else if (d3.event.translate[0] < 0 && d3.event.translate[1] < 0){
                this._d3Select('svg').selectAll('polyline').attr('transform', 'translate(' + [Math.max(translate[0], (1/2-scale)*(1463)),Math.max(translate[1], (1/2-scale)*761)]  + ')scale(' + scale + ')');
                this.props.setParamZoom(scale, [Math.max(translate[0], (1/2-scale)*(1463)),Math.max(translate[1], (1/2-scale)*761)]);
            }else if (d3.event.translate[0] < 0 && d3.event.translate[1] > 0) {
                this._d3Select('svg').selectAll('polyline').attr('transform', 'translate(' + [Math.max(translate[0], (1/2-scale)*(1463)),Math.min(translate[1], (761)/2)]  + ')scale(' + scale + ')');
                this.props.setParamZoom(scale, [Math.max(translate[0], (1/2-scale)*(1463)),Math.min(translate[1], (761)/2)]);
            }else if (d3.event.translate[0] > 0 && d3.event.translate[1] < 0){
                this._d3Select('svg').selectAll('polyline').attr('transform', 'translate(' + [Math.min(translate[0], (1463)/2),Math.max(translate[1], (1/2-scale)*761)]  + ')scale(' + scale + ')');
                this.props.setParamZoom(scale, [Math.min(translate[0], (1463)/2),Math.max(translate[1], (1/2-scale)*761)]);
            }

        }

    }
    _manualZoom (){
        const {scale, translate} = this.props;
        this._d3Select('svg').selectAll('polyline').attr('transform', 'translate(' + [translate[0], translate[1]] + ')scale(' + scale + ')');

    }
    returnPlan(){
        return (
            <div data-atlas="lala">
                <div ref='svgPlan' dangerouslySetInnerHTML={this._convertPlan()}/>
             </div>
        );
    }

    render() {
        return (
            <div data-atlas="svg-container">
                {this.returnPlan()}
            </div>
        );
    }
}

//Static props.
Svg.displayName = 'Svg';
Svg.defaultProps = defaultProps;
Svg.propTypes = propTypes;

export default Svg;