<g> attribute transform: Expected number, "translate( NaN, NaN)"

first of: thank you for your awesome components!

I’m submitting a …

[x] bug report => search github for a similar issue or PR before submitting
>i could not find anything searching for transform NaN

I just cloned the repo and started the npm start

Current behavior

in the browser, there is a error, Error: <g> attribute transform: Expected number, “translate( NaN, NaN)”.

Click to expand

Error: <g> attribute transform: Expected number, "translate( NaN, NaN)". ./node_modules/@angular/platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.setAttribute @ D:\dev\git\ngx-charts-dag\node_modules\@angular\platform-browser\@angular\platform-browser.es5.js:2825 webpackJsonp../node_modules/@angular/platform-browser/@angular/platform-browser/animations.es5.js.BaseAnimationRenderer.setAttribute @ app.js:13360 ./node_modules/@angular/core/@angular/core.es5.js.DebugRenderer2.setAttribute @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:13653 setElementAttribute @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:9324 checkAndUpdateElementValue @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:9291 checkAndUpdateElementInline @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:9240 checkAndUpdateNodeInline @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:12325 checkAndUpdateNode @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:12271 debugCheckAndUpdateNode @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:13132 debugCheckRenderNodeFn @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:13111 (anonymous) @ DirectedGraphComponent.html:47 debugUpdateRenderer @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:13096 checkAndUpdateView @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:12243 callViewAction @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:12603 execEmbeddedViewsAction @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:12561 checkAndUpdateView @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:12239 callViewAction @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:12603 execEmbeddedViewsAction @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:12561 checkAndUpdateView @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:12239 callViewAction @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:12603 execComponentViewsAction @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:12535 checkAndUpdateView @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:12244 callViewAction @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:12603 execComponentViewsAction @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:12535 checkAndUpdateView @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:12244 callWithDebugContext @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:13458 debugCheckAndUpdateView @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:12998 ./node_modules/@angular/core/@angular/core.es5.js.ViewRef_.detectChanges @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:10169 (anonymous) @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:4807 ./node_modules/@angular/core/@angular/core.es5.js.ApplicationRef_.tick @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:4807 (anonymous) @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:4684 ./node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ D:\dev\git\ngx-charts-dag\node_modules\zone.js\dist\zone.js:391 onInvoke @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:3890 ./node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ D:\dev\git\ngx-charts-dag\node_modules\zone.js\dist\zone.js:390 ./node_modules/zone.js/dist/zone.js.Zone.run @ D:\dev\git\ngx-charts-dag\node_modules\zone.js\dist\zone.js:141 ./node_modules/@angular/core/@angular/core.es5.js.NgZone.run @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:3821 next @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:4684 schedulerFn @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:3635 ./node_modules/rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ D:\dev\git\ngx-charts-dag\node_modules\rxjs\Subscriber.js:238 ./node_modules/rxjs/Subscriber.js.SafeSubscriber.next @ D:\dev\git\ngx-charts-dag\node_modules\rxjs\Subscriber.js:185 ./node_modules/rxjs/Subscriber.js.Subscriber._next @ D:\dev\git\ngx-charts-dag\node_modules\rxjs\Subscriber.js:125 ./node_modules/rxjs/Subscriber.js.Subscriber.next @ D:\dev\git\ngx-charts-dag\node_modules\rxjs\Subscriber.js:89 ./node_modules/rxjs/Subject.js.Subject.next @ D:\dev\git\ngx-charts-dag\node_modules\rxjs\Subject.js:55 ./node_modules/@angular/core/@angular/core.es5.js.EventEmitter.emit @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:3621 checkStable @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:3855 onLeave @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:3934 onInvokeTask @ D:\dev\git\ngx-charts-dag\node_modules\@angular\core\@angular\core.es5.js:3884 ./node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ D:\dev\git\ngx-charts-dag\node_modules\zone.js\dist\zone.js:423 ./node_modules/zone.js/dist/zone.js.Zone.runTask @ D:\dev\git\ngx-charts-dag\node_modules\zone.js\dist\zone.js:191 ./node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ D:\dev\git\ngx-charts-dag\node_modules\zone.js\dist\zone.js:498 ZoneTask.invoke @ D:\dev\git\ngx-charts-dag\node_modules\zone.js\dist\zone.js:487 timer @ D:\dev\git\ngx-charts-dag\node_modules\zone.js\dist\zone.js:1829

The error seems to be that DirectedGraphComponent.html has some bindings to [attr.transform]="‘translate(’ + (-dims.width * 50) +‘,’ + (-dims.height*50) + ‘)’ " where dims is undefined

Expected behavior

there is no error log, (and the transform is not applied? )

Reproduction of the problem

Please tell us about your environment:

ngx-charts version: 2.1.3 commit fdb4a600d785ae2637e8ad317bde27fc72fe75d7
Angular version: 4.2.4 (your repo (: )
Browser: Chrome Version 59.0.3071.115 (64-Bit)

Issue Analytics

State:
Created 6 years ago
Reactions:6
Comments:9 (2 by maintainers)

Top GitHub Comments

3reactions

saisumughiscommented, Sep 7, 2017

When are you planning for the next release?

2reactions

Lakstoncommented, Oct 31, 2017

any news on this ? I have the same error.

Top Results From Across the Web

D3.js Error: <g> attribute transform: Expected number ...

The problem indicates an SVG element group ( tag ) has NaN for position coordinates. I see a problem maybe here in your...

attribute transform: Expected number, "scale(NaN ...

I get an error " attribute transform: Expected number, "scale(NaN) translate(N..." whenever I resize the browser. In my application the underlying map ...

Pie Chart - Error : attribute transform: Expected number ...

Hi, I am getting an error on the pie chart. I am simply using array to set the datasource:Here's the code:$("#chartSales").

date label on the X axis - Google Groups

I want to put the date on the X-axis label, but I get the following error: Error: <g> attribute transform: Expected number, "translate(NaN, ......

n3-charts/line-chart - Gitter

d3.v3.min.js:1 Error: Invalid value for <svg> attribute height="NaN"u ... Error: Invalid value for <g> attribute transform="translate(0,NaN)"u ...