-
Notifications
You must be signed in to change notification settings - Fork 14
How to get d3.select().transition to work #117
Comments
Just tried this weird thing and it works. import {Selection, select } from 'd3-selection';
import {transition} from 'd3-transition';
...
transition(select(<HTMLElement>'someDiv'))
.select('someChildElement')
.transition()
....
.attr('key', 'value')
... Is this how it works in V4 and typescript? look weird to you? By default, |
The short answers are the following. Note that, everything under (1) assumes you are using module imports (not vanilla scripts). (1) Getting transitions to work on an existing selection With the new D3 version 4, the d3-transition module extends the d3-selection module's import { select, Selection } from 'd3-selection';
import 'd3-transition'; This will extend the import { select, Selection } from 'd3-selection';
import { transition, Transition } from 'd3-transition'; The **(2) The meaning of the Generics From a level-setting perspective, the new definitions for the
Now that the definitions are essentially migrated to DefinitelyTyped and the official API docs for v4 have stabilized, it is time to complete some of the JSDoc comments. It's already flagged as a todo. Hope the above helps. |
PS. I forgot, you mentioned that you are using Angular 2. I have published a simple/straight-forward Angular 2 Service to get D3 up and running in an ng2 project quickly (i.e. with TS2 support) You can find it at:
It's peer dependencies are up to date with the latest Angular Final release. I build a demo at:
The demo is still on Angular RC.5/angular-cli (v beta.11-webpack.8) Will update it shortly and beef up the README a bit. |
Thank @tomwanzek very much for your in-depth knowledge on how transition works. I am definitely interested on the first method that you mentioned. I have been followed with your process on D4 V4 typescript updates for a while. Because I was limited to system.js and typescript 1.8, i can not play around with the new shining stuffs. I even asked you one time on when is the support going to land on TS 1.8. Well, that was not the case any more. With the solid release of Angular 2.0.0, Angular-cli v1.0.0.beta.14. Most of the people should be on TS 2.0.2, using @types instead of typings should be a nature thing for most of angular devs. I have seen your project As an angular power user, I want to take advantage of webpack 2 tree shaking to drop off all the dead code. If I do use the service, I believe that the final build should import all of the exported modules. even though that you do the separated imports. since the service is a singleton object, which consider that imports everything. I lost the best part of the ES6 module import + tree shaking. Correct me if I am wrong? BTW, how stable of |
Thx. TS 1.8 Definitions TS2 Definitions Stability
I.e. I will wind this repo down and provide a header section update to the README when I am done. d3_ng2_service Given that I will not portrait omniscience of how people are going to use it, the d3_ng2_service may very well evolve with community input. |
Having the same issue... |
I also encountered this issue. For people coming across this thread for the same reason I did, the reason turned out to be that there were two separate package instances of The two different version resolutions were apparent in my
The work-around for me was to manipulate the package lock file directly so that all
I think this may be a problem of D3 plugins specifying |
To solve this issue and avoid hard coding css classes (in angular) you can use next code:
Note:
|
I am using Angular 2.0.0 final, with d3 v4.3.2, typescript to test out some basic feature.
I am using 'd3-selection' module with @types/d3-selection.
Here is my first question, how do I use it? it will give me an error with "Generic type 'Selection<GElement, Datum, PElement, PDatum>'". I know that I need to give a type of it. so that I just give all 'any' to bypass this step. An explanation how to correctly set those four fields would be very helpful
My main question is, When I select an element on the page, I do not have "transition" method attached on the prototype. I could not chain with '.transition()' method to make it animate. Any hints would be really appreciated.
If I comment out the 'transition()' method, selected element could use 'attr' method, since it is on its prototype. When I chained 'transition()' method, it won't work. I got an error "select(...).transition" is not a function
Please, help. I have no idea how to do it to be able to chain with 'transition()'
The text was updated successfully, but these errors were encountered: