Add Support For D3 v4

[mbostwick]

When trying to use the latest version of d3, ng-knob does not work..

[sheldonhall]

Seems i'm getting this issue as well, were you able to get around it?

[sheldonhall]

I got around this issue by including a previous version (3.5.1.7) of this dependency directly

https://github.com/d3/d3/releases/tag/v3.5.17

[gsfitis]

I found a way to make it work with d3 V4.4.0 (downloaded from npm).

I uploaded the entire js file for anyone who want to read and improve it (ng-knob.js.zip).
There is still work to be done for animations as d3 v4 call animations as functions ( documendation ) and not as strings as with d3 V3.15.7. You can read the functions and implement the one that suits you from here.

At this point the animations that work are 'linear' and 'bounce' (sorry for that but i do not have time right now to make it more complex). You do not need to change anything on the knob options as the translation from the 'string' animation to the function one is being bone inside ng-knob.js.

I also kept the previous code commented for those of you who want to read it.

so in here are the the lines you need to change:

line:17 ++    /* d3 V4 ease functions */
line:18 ++    this.animations = {
line:19 ++        lenear: d3.easeLinear,
line:20 ++        bounce: d3.easeBounce
line:21 ++    };

---

line:38 --    //var arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius).startAngle(startAngle).endAngle(endAngle).cornerRadius(cornerRadius);
line:39 ++    var arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius).startAngle(startAngle).endAngle(endAngle).cornerRadius(cornerRadius);

---

line:43 --    //var elem = svg.append("path").attr("id", label).attr("d", arc).style(style).attr("transform", "translate(" + this.options.size / 2 + ", " + this.options.size / 2 + ")");
line:44 ++    var elem = svg.append("path")
line:45 ++                  .attr("id", label)
line:46 ++                  .attr("d", arc);
line:46 ++
line:48 ++    for (var key in style) {
line:49 ++        elem.style(key,style[key]);
line:50 ++    }
line:51 ++
line:52 ++    elem.attr("transform", "translate(" + this.options.size / 2 + ", " + this.options.size / 2 + ")");
line:53 ++

---

line:224 --    //var dragBehavior = d3.behavior.drag().on("drag", dragInteraction).on("dragend", clickInteraction);
line:225 ++    var dragBehavior = d3.drag().on("drag", dragInteraction).on("end", clickInteraction);

---

line:228 --    //that.valueElem.transition().ease(that.options.animate.ease).duration(that.options.animate.duration).tween("", function() {
line:229 ++    that.valueElem.transition().ease(that.animations[that.options.animate.ease]).duration(that.options.animate.duration).tween("", function() {

[xzegga]

I think that there is a type error in line 19, did you mean linear instead of lenear?

[mattgallivan]

I've got a repo that seems to work for d3 5.0. I can submit this as a pull request if the author is still active.

https://github.com/mattgallivan/ng-knob