DOM _doesnt_match_display

JavaScript
1

Tell us what’s happening:
the text of every circle tooltip show only the cordinates of the first of them (34, 78) even though my DOM inspector show such node to have the required values. Besides that it doesn’t pass the “run the test” button not sure why. Other than that the rest works fine it seems

Your code so far


<body>
<script>
        const dataset = [
                  [ 34,    78 ],
                  [ 109,   280 ],
                  [ 310,   120 ],
                  [ 79,    411 ],
                  [ 420,   220 ],
                  [ 233,   145 ],
                  [ 333,   96 ],
                  [ 222,   333 ],
                  [ 78,    320 ],
                  [ 21,    123 ]
                ];

    const w = 500;
    const h = 500;

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);

    svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")
       .attr("cx", (d, i) => d[0] )
       .attr("cy", (d, i) => h - d[1])
       .attr("r", 5);

    svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("title")
       .text((d) => (d[0] + ", " + d[1]))
</script>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36.

Challenge: Add Attributes to the Circle Elements

Link to the challenge:

2

Why do you have + 5 for the cx value?

3

just because the required values were +5 higher that each of those in the dataset

4

Where do you see that requirement?

The cx value should be the first number in the array for each item in dataset

5

But it says the X value displayed as tooltip must five units smaller than the actual X value in the DOM:
“The second label should have text of “109, 280”, an x value of 114, and a y value of 220.
The third label should have text of “310, 120”, an x value of 315, and a y value of 380.”

6

But that requirement is not from the challenge you asked for help on.

That requirement is from the add labels to scatter plot circles challenge. In any case, none of the two challenges wants you to add 5 to the cx value as you did (you seem to have edited your post). The challenge you seem to be talking about wants you to add 5 to the x value on the label.

You may want to revisit add labels to d3 elements and if you have to look at the hint I wouldn’t hold it against you because I think the challenge is being really vague about how to add a comma-separated list. Not sure if that was covered elsewhere.

1 Like
7

Then I could use key pairs instead?

8

Not sure what you mean? I’m also still not sure what challenge you are on right now, can you confirm you are on the “Add Labels to Scatter Plot Circles” challenge?

  1. Add the x and y attributes, set the x values to be the cx values + 5 and y to be the same as cy.

  2. Use the .text() method and add both the cx and cy values inside it, separated by a comma. You can use string concatenation or template literals.

Sudo-ish Code:

.attr("x", (d) => theCxValue + 5)
.attr("y", (d) => theCyValue)

.text((d) => theCyValue + ", " + theCxValue)

Or

.text((d) => `${theCyValue}, ${theCxValue}`)
9

sorry I messed up, yes I’m on "
Add Labels to Scatter Plot Circles" I’ll try the last suggestion, thank you.

10

And I also didn’t realize I had to add the attributes again after a new selection, my bad really, i couldn’t focus too much in this of late really, thank you a lot !!

11

No worries. Personally, I don’t think it is super obvious what is needed for this challenge, especially not the comma-separated part.

Just let me know if you need more help, or if you have completed the challenge.

1 Like
12

HI lasjorg, today I read carefully the requirements, I realizez I was messing the tag thing from previous lesson and this was just about text nodes, also adjusted everything else acordingly. Right now my browser inspector says I’m meeting every requirement but the “run test” button stil disagrees and I don’t know why

13

Can you please post your latest code.