search

RadMie / ng-knob

Angular.js directive to Knob component powered by d3.js (without jQuery)
http://radmie.github.io/ng-knob
MIT License
117 stars 48 forks source link

ng-knob directive for Angular2 and TypeScript #23

Closed thiboot closed 2 years ago

thiboot commented 8 years ago

Hello, i adapted your work on ng-knob directive for Angular2 and TypeScript

Instructions: 1) Install d3 typings 2) import {Knob} from '../../knob/ng-knob2'; 3) <ui-knob [(value)]="myKnobValue" [options]="myKnobOptions">

Value: 2 ways binding Options: 1 way binding

Well tested in ionic2

hounsellal commented 8 years ago

Can you provide more details instructions for using this with ionic2?

kevingilbert100 commented 7 years ago

Do you happen to have a example project with this.

DanCard0 commented 7 years ago

No funcionó para mi: 'ui-knob' is not a known element

xzegga commented 7 years ago

@DanCard0 same problem for me, did you resolve the issue?

xzegga commented 7 years ago

I have this problem when I put this directive in a component:

`Can't bind to 'value' since it isn't a known property of 'ui-knob'.`
1. If 'ui-knob' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'ui-knob' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to .....

I have added the directive to the declarations section in my module but doesn't not work. additionally I have added with yarn d3 and @types/d3-selections What's wrong?

markterrill commented 7 years ago

Hi, does anyone have this working in angular2 and d3.js v4?

prashantghimire commented 7 years ago

I had it working with d3 v3 and @types/d3 v3 ..

xzegga commented 7 years ago

@prashantghimire yes, I has migrate all suggested changes from d3v3 to d3v4, I will fork the repo and provide you the link for it.

xzegga commented 7 years ago

@prashantghimire here is the repo working with angular 4 and d3.js v4 xZegga/angular2-knob

markterrill commented 7 years ago

Hi, thanks @xzegga

When I tried it, I got a few typescript errors, ie:

Argument of type '{ r: (d: { r: any; }) => any; cx: (d: { cx: any; }) => any; cy: (d: { cy: any; }) => any; fill: a...' is not assignable to parameter of type 'string'.

and 

Argument of type '{ x1: (d: { x1: any; }) => any; y1: (d: { y1: any; }) => any; x2: (d: { x2: any; }) => any; y2: (...' is not assignable to parameter of type 'string'.

and

Namespace '"/Users/markterrill/git-repo/ionic3-d3-chart/node_modules/@types/d3/index"' has no exported member 'DragEvent'.
xzegga commented 7 years ago

Are you using this directive on angular for web or ionic framework? I'm don't have any experience with ionic, but this problem looks like a typescript version problem.

markterrill commented 7 years ago

Hi, am using it on ionic 2 framework. Typescript is: "typescript": "2.3.4"

markterrill commented 7 years ago

I've been able to remove the 'argument of type' errors by splitting out the functions given to attr(). However still getting the namespace issue

xzegga commented 7 years ago

Check if you have a right version for d3.js and d3-selection

     "@types/d3-selection": "^1.1.0",
    "d3": "^4.10.0"

This directive use specifically d3.js v4 or highter

PD.: you can add your question or comments in the repository page and paste the link on this page

markterrill commented 7 years ago

Hi, thanks. Have added an issue to the other repo. https://github.com/xzegga/angular2-knob/issues/1