Network.js

import React from "react";
import * as d3 from "d3";
var simulation;
var svg;

export default class Network extends React.Component {

	shouldComponentUpdate(nextProps, nextState) {
		return false;
	}

	componentWillReceiveProps(nextProps) {
		if(nextProps.data.nodes.length > 0 && nextProps.data !== this.props.data){
			var data = Object.assign({}, nextProps.data);
			this.renderGraph(data)
		}else if(nextProps.isPageSideBarOpen !== this.props.isPageSideBarOpen){
			this.handleResize();
		}
	}

	componentDidMount() {
		window.addEventListener('resize', this.handleResize);
		if(this.props.data.nodes.length > 0){
			var data = Object.assign({}, this.props.data);
			this.renderGraph(data)
		}
	}

	componentWillUnmount() {
		window.removeEventListener('resize', this.handleResize);
	}

	renderGraph(data){
		var width = parseInt(d3.select(".network").style("width")),
		    height = parseInt(d3.select(".network").style("height")) + 40,
		    biggestValue = 0,
		    biggestLink = null;

		svg = d3.select(".network")
			.append("svg")
			.attr("viewBox", "0 0 " + width + " " + height )
			.attr("preserveAspectRatio", "xMidYMid meet");

		   
		var nodesVisits = {},
		    largestNode = 0;
		data.links.forEach(function(link) {
			if(nodesVisits[link.source] != null){
				nodesVisits[link.source] += link.value;
			}else{
				nodesVisits[link.source] = link.value;
			}
			
			if(biggestValue < link.value){
				biggestValue = link.value
				biggestLink = link;
			}
		});

		for(var key in nodesVisits) {
			if(nodesVisits[key] >= largestNode) largestNode = nodesVisits[key];
		}

		
		svg.attr("width", width)
		   .attr("height", height);
		
		var color = d3.scaleOrdinal(d3.schemeCategory20);

		simulation = d3.forceSimulation()
		    .force("link", d3.forceLink().distance(400).id(function(d) { return d.id; }))
		    .force("charge", d3.forceManyBody().strength(-100))
		    .force("center", d3.forceCenter(width / 2, height / 2));

		var link = svg.append("g")
		  	.attr("class", "links")
			.selectAll("line")
			.data(data.links)
			.enter().append("line")
			.style("stroke-opacity", function(d) { 
		  		const value = d.value/biggestValue
			  	if(value < .1){
			  		return .1
			  	}

			  	if(value > .7){
			  		return .7
			  	}

			  	return value; 
			});

		var node = svg.append("g")
		  	.attr("class", "nodes")
			.selectAll("circle")
			.data(data.nodes)
			.enter().append("circle")
		  	.attr("r", function(d){
		  		if(nodesVisits[d.id] == null) return 2;
		  		const value = (nodesVisits[d.id]/largestNode)*8
			  	if(value < 2){
			  		return 2
			  	}
			  	return value; 
		  	})
		  	.attr("class", function(d){
			  	if(nodesVisits[d.id] !== largestNode){
			  		return "nodes"
			  	}
			  	return "nodes largest"; 
		  	})
		  	.attr("fill", function(d) { return color(d.group); })
		  	.on("mouseover",this.props.handleTooltipPosition )
		  	.on("mouseout",this.props.handleTooltipHide )
		  	.on("click",this.props.handleTooltipClick)
		  	.style("cursor", "pointer")

		  // .call(d3.drag()
		  //     .on("start", this.dragstarted)
		  //     .on("drag", this.dragged)
		  //     .on("end", this.dragended));

		node.append("title")
		  	.text(function(d) { return d.id; });

		simulation
		  	.nodes(data.nodes)
		  	.on("tick", ticked);

		simulation.force("link")
		  	.links(data.links);

		// this.props.openTooltip(biggestLink.target);

		function ticked() {
			link
			    .attr("x1", function(d) { return d.source.x; })
			    .attr("y1", function(d) { return d.source.y; })
			    .attr("x2", function(d) { return d.target.x; })
			    .attr("y2", function(d) { return d.target.y; });

			node
			    .attr("cx", function(d) { return d.x; })
			    .attr("cy", function(d) { return d.y; });
		}

	}

	dragstarted(d) {
		if (!d3.event.active) simulation.alphaTarget(0.3).restart();
		d.fx = d.x;
		d.fy = d.y;
	}

	dragged(d) {
		d.fx = d3.event.x;
		d.fy = d3.event.y;
	}

	dragended(d) {
		if (!d3.event.active) simulation.alphaTarget(0);
		d.fx = null;
		d.fy = null
	}

	handleResize = () => {
     	var width = parseInt(d3.select(".network").style("width")),
      		height = parseInt(d3.select(".network").style("height")) - 10,
      		instance = this;

      	// Update the range of the scale with new width/height
      	if(svg != null){
	      	svg.attr("width", width)
	           .attr("height", height);

	        simulation = d3.forceSimulation()
			    .force("link", d3.forceLink().distance(250).id(function(d) { return d.id; }))
			    .force("charge", d3.forceManyBody().strength(-100))
			    .force("center", d3.forceCenter(width / 2, height / 2));
		}
    }

	render(){
		return (
			<div className="network " />
		);
	}
}