D3 Heat Map - Title and Description Not Appearing

JavaScript
1

Why is my text for the title and description not appearing?

I wrote a test that shows that access to the tag in the HTML document is null. This seems to indicate that there is no access to the HTML. If there is no HTML access, nothing would appear. The axes are visible showing that the HTML is being written. Weird .

2

it is not possible to help you with the informations you have provided, you may want to share your code

3

My codepen is https://codepen.io/richardvannie/pen/ByaLBvb

4 
const svg = d3
    .select("body")
    .append("svg")

svg is an SVG appended to the body of the document.

const container = svg.append("g").

container is then appended onto svg

container
    .select("body")
    .append("text")

Are you sure container has a body as well?

container
    .append("g")
    .attr("id", "y-axis")

Other things you append to container don’t use .select("body")

I hope this helps!

5

I got the title and description to appear. But at what cost? Now I am back at the position where the axes don’t appear. This seems like a double-bind either/or. How do I have EVERYTHING appear?

My codepen is https://codepen.io/richardvannie/pen/ByaLBvb

6

Help me out a bit. What changes did you make?

Previously I was able to make the title and description appear (with the axes) just by removing .select("body") from those parts of code.

Do you need to write the title and description through the JS? Not sure that is a requirement. Can you please provide a link to the project requirements?

const svg = d3
    .select("#heat-map")

What does #heat-map refer to?

7

I replaced .select(“heat-map”) with .select(“body”) and it now works . Thank you.

1 Like