Git Product home page Git Product logo

Comments (5)

gsfitis avatar gsfitis commented on May 18, 2024 1

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() {

from ng-knob.

sheldonhall avatar sheldonhall commented on May 18, 2024

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

from ng-knob.

sheldonhall avatar sheldonhall commented on May 18, 2024

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

from ng-knob.

xzegga avatar xzegga commented on May 18, 2024

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

from ng-knob.

mattgallivan avatar mattgallivan commented on May 18, 2024

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

from ng-knob.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.