d3v4 selectAll() not working

[Joe Keohan]

I finally decided to use d3v4 instead of v3 going forward and it seems I'm having issues with selectAll().  Here is a codepen of what I'm working but here is the code regardless.  The error i keep getting is: Cannot read property 'selectAll' of null(…)...Now If i change the pen to reference d3v3 than it works fine.  I also looked at the API reference material for select.merge and my code is almost identical outside of using .merge().  What am i overlooking? 

const arr = [1,2,3,4,5];

const w = 500;

const h = 500;

let svg = d3.select('body').append('svg').attr({widht:w,height:h})

let circles = svg.selectAll('circles').data(arr) 

circles.enter().append('circle')

  .attr('cx',function(d,i) { return i * 50 })

  .attr('cy',50)

  .attr('r',20)

Joe

[Vlado Z]

JavaScript ES6?

[Barend Köbben]

If you want people to help you, ask a specific question, not a riddle like this...

On 05/12/16 11:30, "Vlado Z" <d3...@googlegroups.com on behalf of vlz...@gmail.com> wrote:

JavaScript ES6?


--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Joe Keohan]

Barend - I'm assuming your response was meant for me and if that is the case than what about my question needs more clarity?  

Vlado - just to be clear the same ES6 code will work if the link reference is changed to use v3 so it has nothing to do with ES6.  

[Ian B]

It looks a bit like maybe the problem is the .attr({width:w,height:h}) bit, if you put that on a separate line as svg.attr({width:w,height:h}) I think it will work. Maybe it's the return value of using attr() thats somehow different (or maybe somewhere around that area)?

Ian

--

You received this message because you are subscribed to the Google Groups "d3-js" group.

To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.

[Vlado Z]

I think you should do:

d3.select('body').append('svg').attr("width", w).attr("height", h))

But also see syntax error at widht:

{widht:w, height:h} -> {width:w, height:h}




[Vlado Z]

discard the last bracket, sorry!

[Curran]

Hi Joe,

I believe the issue is that the D3 v4 default build does not include d3-selection-multi, which is required to pass objects into selection.attr, which actually will become selection.attrs.

The following line from your snippet works with version 3:

.attr({widht:w,height:h})

When using version 4, you can either say

.attr("widht", w)

.attr("height", h)

or load d3-selection-multi on the page (in addition to the default d3.js v4 build, which does not include this) and say

.attrs({widht:w,height:h})

Here's a working upgrade of your CodePen that uses the latter approach.

All the best,

Curran

Datavis.tech

[Joe Keohan]

Vlado - you are indeed correct...the issue was with .attr and trying to combine the attributes...i've used this construct in v3 and the code sample in codepen works fine in v3 but not in v4 so it appears the change in versions has removed support for combining attributes.   The thing that threw me off was that an svg was being created, however i didn't notice the dimensions were off...which means it's not using the attr values provided.  

Thanks for your assist.  Sometimes it just takes another set of eyes to work out the small things...

All the best...

[Vlado Z]

Yes it happened to me several times. The code looks good but it doesn't work. Finally you see error in the string keys.

I would recommend replacing string keys like "width", "height", "path" etc... with JS ES5/ES6 constants.

Something like GRAPH_WIDTH = "width", GRAPH_HEIGHT="height", SVG_PATH = "path" etc...