Comments (5)
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.
Seems i'm getting this issue as well, were you able to get around it?
from ng-knob.
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.
I think that there is a type error in line 19, did you mean linear instead of lenear?
from ng-knob.
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)
- Not able to display updated value HOT 5
- Add 0.1.4 Release To Git Hub
- Knob stops responding when value is greater than defined maximum HOT 1
- Interacting does not prevent page scroll HOT 2
- Responsive Knob - not a issue but question
- Include hover text on Arc
- Dial Mode HOT 1
- Insert additional text after the subText.
- Update ng-knob-dial value on mouse wheel events and keyboard events
- Controller 'ngModel', required by directive 'ngKnob'
- Possible to use without Angular.js?
- How to stop knob value at maximum limit? HOT 1
- Angularjs updated value not updating ui-knob (chart)
- How to call a function on "knob change"?
- Different color for barCap
- circular slider fires a second time when touching anywhere on the screen
- How to "Set" the value from javascript? HOT 3
- New features
- Feature Request: Zero-based reversing HOT 1
- help me with ngKnob: angular is not on the window! error
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng-knob.