Make DependencyWheel D3 v4 compatible

index.html

@@ -65,7 +65,7 @@ <h2>Purpose</h2>
       <li>Did you ever look for a visualization that would help you understand the mess that's in a <code>composer.json</code>?</li>
     </ul>
     <p>DependencyWheel tries to answer these needs. Also, it tries to make dependencies look beautiful, but that's another story.</p>
-    
+
     <h2>Usage</h2>
     <p>To create a DependencyWheel, include the <code>d3.dependencyWheel.js</code> file together with <code>d3.js</code>, just like in this page. Create a new instance of the dependency wheel chart constructor, then make a d3 selection using a CSS selector (of the div where the wheel should be inserted), attach dependency data, and call the chart on the selection.</p>
 <pre>
@@ -115,7 +115,7 @@ <h2>Licence</h2>
     </div>
   </div>
   <a href="https://github.com/fzaninotto/DependencyWheel"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
-  <script src="js/d3.min.js"></script>
+  <script src="js/d3.v4.min.js"></script>
   <script src="js/d3.dependencyWheel.js"></script>
   <script src="js/composerBuilder.js"></script>
   <script>

js/d3.dependencyWheel.js

@@ -45,8 +45,8 @@ d3.chart.dependencyWheel = function(options) {
       var radius = width / 2 - margin;
 
       // create the layout
-      var chord = d3.layout.chord()
-        .padding(padding)
+      var chord = d3.chord()
+        .padAngle(padding)
         .sortSubgroups(d3.descending);
 
       // Select the svg element, if it exists.
@@ -60,7 +60,7 @@ d3.chart.dependencyWheel = function(options) {
       .append("g")
         .attr("transform", "translate(" + (width / 2) + "," + (width / 2) + ")");
 
-      var arc = d3.svg.arc()
+      var arc = d3.arc()
         .innerRadius(radius)
         .outerRadius(radius + 20);
 
@@ -72,14 +72,14 @@ d3.chart.dependencyWheel = function(options) {
       // Returns an event handler for fading a given chord group.
       var fade = function(opacity) {
         return function(g, i) {
-          svg.selectAll(".chord")
+          gEnter.selectAll(".chord")
               .filter(function(d) {
                 return d.source.index != i && d.target.index != i;
               })
             .transition()
               .style("opacity", opacity);
           var groups = [];
-          svg.selectAll(".chord")
+          gEnter.selectAll(".chord")
               .filter(function(d) {
                 if (d.source.index == i) {
                   groups.push(d.target.index);
@@ -90,7 +90,7 @@ d3.chart.dependencyWheel = function(options) {
               });
           groups.push(i);
           var length = groups.length;
-          svg.selectAll('.group')
+          gEnter.selectAll('.group')
               .filter(function(d) {
                 for (var i = 0; i < length; i++) {
                   if(groups[i] == d.index) return false;
@@ -102,14 +102,14 @@ d3.chart.dependencyWheel = function(options) {
         };
       };
 
-      chord.matrix(matrix);
+      var chordResult = chord(matrix);
 
-      var rootGroup = chord.groups()[0];
+      var rootGroup = chordResult.groups[0];
       var rotation = - (rootGroup.endAngle - rootGroup.startAngle) / 2 * (180 / Math.PI);
 
       var g = gEnter.selectAll("g.group")
-        .data(chord.groups)
-      .enter().append("svg:g")
+        .data(chordResult.groups)
+        .enter().append("svg:g")
         .attr("class", "group")
         .attr("transform", function(d) {
           return "rotate(" + rotation + ")";
@@ -138,12 +138,12 @@ d3.chart.dependencyWheel = function(options) {
         .on("mouseout", fade(1));
 
       gEnter.selectAll("path.chord")
-          .data(chord.chords)
-        .enter().append("svg:path")
+          .data(chordResult)
+          .enter().append("svg:path")
           .attr("class", "chord")
           .style("stroke", function(d) { return d3.rgb(fill(d.source)).darker(); })
           .style("fill", function(d) { return fill(d.source); })
-          .attr("d", d3.svg.chord().radius(radius))
+          .attr("d", d3.ribbon().radius(radius))
           .attr("transform", function(d) {
             return "rotate(" + rotation + ")";
           })