dx and dy are NaN in cluster function

[ebrehault]

I try to reproduce this example:
https://bl.ocks.org/mattgiguere/339843b4622a965048fc9f61598f2d47
in Angular 2 using d3-ng2-service.

Surprisingly, it fails because the cluster() function returns bad x and y (they are all NaN).
It comes from here:
https://github.com/d3/d3-hierarchy/blob/master/src/cluster.js#L62
where dx and dy are both NaN even if they are declared here:
https://github.com/d3/d3-hierarchy/blob/master/src/cluster.js#L35

Nevertheless I do not think it is a D3 bug (as the example is running fine), so I guess it comes from my usage of d3-ng2-service.
Any hints?

My code is here: https://gist.github.com/ebrehault/d4ef30dcd3d5c21c748efc3afee5d176#file-content-tree-component-ts
and the console.log in line 69 shows x and y NaN values.

[tomwanzek]

@ebrehault I'll give it a look when I have a minute. What version of the d3-ng2-service did you test things with?

[ebrehault]

1.8.0

[tomwanzek]

I had a quick look. The primary issue is neither with the service nor d3. The bl.ocks usually start with a an html template which contains an svg with pre-set dimensions suitable for the demo. In the case of the one you are exploring: <svg width="500" height="300"></svg>.

In the process of using d3 usually these pre-set dimentions are retrieved as attributes from the selection of the svg element and then used in the code as needed.

When converting such an example, you have to ensure that these dimensions are set, so they can be used e.g. to calculate the tree layout. Your issue disappears, if you change your component template to <svg:svg width="500" height="300"></svg:svg>

While this clearly does not yet give you a very data-driven component yet, it allows you to continue exploring the content tree and then iteratively use more @Input()s to give you more flexibility.

Hope this helps.

[ebrehault]

Oh ok! Well I was definitely not looking in the right place :)
Thank you very much.

[tomwanzek]

Not to worry. Been there done that... 😉