CODEWITHSUNDEEP
angulard3.js
ttmt
ttmt

Reputation: 4984

D3, Angular, scatter chart

I have a plunker here - https://plnkr.co/edit/ndY0nB5kf6ECN9r3Yb9Q?p=preview

I'm trying to create a D3 scatter chart in Angular.

I have the svg with axis and the circles are being added but in one place.

I'm getting the error

Error: <circle> attribute cy: Expected length, "NaN".

Upvotes: 1

Views: 550

Answers (1)

wholevinski
wholevinski

Reputation: 3828

You're trying to set cy to "NaN". In bar-chart.ts, you're assigning cy to d[1]. d[1] is undefined though.

d appears to be an object that looks like this: {number: 1, total: 2}.

Changing the cy assignment to d['total'] correctly aligns them on the y axis. I'm still unsure about the x-axis though.

EDIT: this.x in bar-charts.ts is returning undefined for all values it appears, so all circles end up at 0.

Final edit: I messed with the scales and got it working with a linear scale on each axis. Here's a plunker: https://plnkr.co/edit/F3xYtAu6AhnWg1y3ETcV?p=preview

Upvotes: 1

Related Questions