hazemhagrass / d3-sankey Goto Github PK

@@ -315,7 +319,7 @@ d3.sankeyChart = function (data, options
     self.staticLinkColor = options.staticLinkColor ? options.staticLinkColor : '#000';
     self.formatNumber = d3.format(',.0f');
     self.format = d => `${self.formatNumber(d)}`;
-    self.color = d3.scale.category20();
+    self.color = d3.scaleOrdinal(d3.schemeCategory20);
 
     let canvas, svg, sankey, link, path, node = null;
 
@@ -352,10 +356,8 @@ d3.sankeyChart = function (data, options
             .attr('class', 'link')
             .attr('d', path)
             .style('stroke-width', d => Math.max(1, d.dy))
-            .style({
-                fill: 'none',
-                'stroke-opacity': 0.15
-            })
+            .style('fill', 'none')
+            .style('stroke-opacity', 0.15)
             .style('stroke', function (d) {
                 let color = self.staticLinkColor ? self.staticLinkColor : '#000';
                 color = self.dynamicLinkColor ? self.color(d.source.name.replace(/ .*/, '')) : color;
@@ -384,9 +386,10 @@ d3.sankeyChart = function (data, options
             .enter().append('g')
             .attr('class', 'node')
             .attr('transform', d => `translate(${d.x}, ${d.y})`)
-            .call(d3.behavior.drag()
-                .origin(d => d)
-                .on('dragstart', function () {
+            
+            .call(d3.drag()
+                .subject(d => d)
+                .on('start', function () {
                     this.parentNode.appendChild(this);
                 })
                 .on('drag', dragmove));
@@ -398,12 +401,10 @@ d3.sankeyChart = function (data, options
                 d.color = self.color(d.name.replace(/ .*/, ''));
                 return d.color;
             })
-            .style({
-                stroke: 'none',
-                cursor: 'move',
-                'fill-opacity': 0.9,
-                'shape-rendering': 'crispEdges'
-            })
+            .style('stroke', 'none')
+            .style('cursor', 'move')
+            .style('fill-opacity', 0.9)
+            .style('shape-rendering', 'crispEdges')
             .append('title')
             .text(d => `${d.name}\n${self.format(d.value)}`);
 
@@ -413,10 +414,8 @@ d3.sankeyChart = function (data, options
             .attr('dy', '.35em')
             .attr('text-anchor', 'end')
             .attr('transform', null)
-            .style({
-                'pointer-events': 'none',
-                'text-shadow': '0 1px 0 #fff'
-            })
+            .style('pointer-events', 'none')
+            .style('text-shadow', '0 1px 0 #fff')
             .text(d => d.name)
             .filter(d => d.x < self.innerWidth / 2)
             .attr('x', 6 + sankey.nodeWidth())
@@ -426,19 +425,19 @@ d3.sankeyChart = function (data, options
     self.renderTrafficInLinks = function () {
         const linkExtent = d3.extent(data.links, d => d.value);
 
-        const frequencyScale = d3.scale.linear()
+        const frequencyScale = d3.scaleLinear()
             .domain(linkExtent)
             .range([0.05, 1]);
 
         /* const particleSize = */
-        d3.scale.linear()
+        d3.scaleLinear()
             .domain(linkExtent)
             .range([1, 5]);
 
         data.links.forEach(currentLink => {
             currentLink.freq = frequencyScale(currentLink.value);
             currentLink.particleSize = 2;
-            currentLink.particleColor = d3.scale.linear().domain([0, 1])
+            currentLink.particleColor = d3.scaleLinear().domain([0, 1])
                 .range([currentLink.source.color, currentLink.target.color]);
         });