Myujth

I am trying to make a sankey diagram using d3 and react.js and I am using this example as a reference https://bl.ocks.org/emeeks/9673c96a682fe3948379. I am fairly new to react(2 days) and I am getting this error--

./src/components/SankeyComponent.js

Attempted import error: 'behavior' is not exported from 'd3' (imported as 'd3').

SankeyComponent.js
This is my code for creating SankeyComponent. As soon as I clear one error other import and export erros are coming up.

import React, Component from 'react';
import ReactFauxDOM from 'react-faux-dom';
import * as d3 from 'd3';
import sankey from 'd3-plugins-sankey';
import _ from 'lodash';
import NODES from '../shared/nodes';
import LINKS from '../shared/links';

class Sankey extends Component 

 constructor(props) 
 super(props);

 this.state = 
 nodes: NODES,
 links: LINKS
 ;
 
 render() 

 // Set units, margin, sizes
 var margin = top: 1, right: 1, bottom: 6, left: 1,
 width = 960 - margin.left - margin.right,
 height = 500 - margin.top - margin.bottom;

 var formatNumber = d3.format(",.0f"),
 format = function(d) return formatNumber(d) + " TWh"; ,
 color = d3.scale.category20();

 // Set the sankey diagram properties

 var sankey = d3.sankey()
 .nodeWidth(15)
 .nodePadding(10)
 .size([width, height]);

 var path = sankey.link();

 //var freqCounter = 1;

 var graph = 
 nodes: _.cloneDeep(this.state.nodes),
 links: _.cloneDeep(this.state.links)
 ;

 sankey.nodes(graph.nodes)
 .links(graph.links)
 .layout(32);

 // Initialize and append the svg canvas to faux-DOM

 var svgNode = ReactFauxDOM.createElement('svg');

 var svg = d3.select(svgNode)
 .attr("width", width + margin.left + margin.right)
 .attr("height", height + margin.top + margin.bottom)
 .append("g")
 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 // Initialize and append the svg canvas to faux-DOM
 var link = svg.append("g").selectAll(".link")
 .data(graph.links)
 .enter().append("path")
 .attr("class", "link")
 .attr("d", path)
 .style("stroke-width", function(d) return Math.max(1, d.dy); )
 .sort(function(a, b) return b.dy - a.dy; );

 link.append("title")
 .text(function(d) return d.source.name + " → " + d.target.name + "n" + format(d.value); );

 // Add nodes

 var node = svg.append("g").selectAll(".node")
 .data(graph.nodes)
 .enter().append("g")
 .attr("class", "node")
 .attr("transform", function(d) return "translate(" + d.x + "," + d.y + ")"; )
 .call(d3.behavior.drag()
 .origin(function(d) return d; )
 .on("dragstart", function() this.parentNode.appendChild(this); )
 .on("drag", dragmove));

 node.append("rect")
 .attr("height", function(d) return d.dy; )
 .attr("width", sankey.nodeWidth())
 .style("fill", function(d) return d.color = color(d.name.replace(/ .*/, "")); )
 .style("stroke", "none")
 .append("title")
 .text(function(d) return d.name + "n" + format(d.value); );

 node.append("text")
 .attr("x", -6)
 .attr("y", function(d) return d.dy / 2; )
 .attr("dy", ".35em")
 .attr("text-anchor", "end")
 .attr("transform", null)
 .text(function(d) return d.name; )
 .filter(function(d) return d.x < width / 2; )
 .attr("x", 6 + sankey.nodeWidth())
 .attr("text-anchor", "start");

 var linkExtent = d3.extent(graph.links, function (d) return d.value);
 var frequencyScale = d3.scale.linear().domain(linkExtent).range([0.05,1]);
 //var particleSize = d3.scale.linear().domain(linkExtent).range([1,5]);

 // the function for moving the nodes
 function dragmove(d) 
 d3.select(this).attr("transform", "translate(" + d.x + "," + (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
 sankey.relayout();
 link.attr("d", path);
 

 graph.links.forEach(function (link) 
 link.freq = frequencyScale(link.value);
 link.particleSize = 2.5;
 link.particleColor = d3.scale.linear().domain([0,1])
 .range([link.source.color, link.target.color]);
 )



 return (
 <svg>
 svg.node().toReact()
 </svg>
 );

 


export default Sankey;

Looks like d3.behavior.drag was renamed to d3.drag in v4. https://github.com/d3/d3/blob/master/CHANGES.md#dragging-d3-drag

Since you're using d3 v4, you can either update your code or downgrade to v3