Strange occurrence coding d3 scatter plot challenge

Strange occurrence coding d3 scatter plot challenge
0

#1

so although the user story doesn’t specify it, I attempted to replicate the example by labeling each data point with biker names.

I’ve tried to do something like this

svg.selectAll(“circle”).data(data).enter().append(“circle”)
.attr(“class”, “dot”)
.attr(“cx”, function(d) { return x(d.x); })
.attr(“cy”, function(d) { return y(d.y); })
.attr(“r”, 5);
svg.selectAll(“text”).data(data).enter().append(“text”)
.attr(“x”, function(d) { return x(d.x)+5; })
attr(“y”, function(d) { return y(d.y); })
text(function(d) { return y(d.y); });

but strangely half the names disappeared.

After a little bit of searching, I found that the solution is to use a different identifier with selectAll, like “.txt”, but I don’t understand why half the elements disappeared, or why just adding a period in front of text would solve the problem.

Can anyone explain to me what happened?


#2

Is there a way you could post the non-working version of this on CodePen and share it? In this snippet, I can see a couple of syntax errors, but I don’t think that would cause your problem.


#3

here it is Scatterplot


#4

I would need to know how you were implementing the identifier text to be able to tell you what happened.


#5

Instead of .selectAll(“text”), I just added a period to the front of text, into selectAll(".text"), and that solved the problem.

There were no preexisting text elements before the call.


#6

If I didn’t answer your question, then I want to say I probably didn’t know what you meant. I just did it the same way I created the data points, just instead of circles, I added text, but for some reason only 18 names appeared


#7

What’s really interesting is that it’s not the .text that fixes it. It’s actually anything other than text. I just tried d3.selectAll('poop') and it worked. Honestly, I have no idea why this is happening. Very strange.

edit: Also, appending a 'g' for the text fixes it.


#8

It bothers me that I don’t know why it’s happening. It’s pretty much the exact same code, yet one doesn’t work the same as the other