From the course: D3.js Essential Training for Data Scientists

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Adding text

Adding text - D3.js Tutorial

From the course: D3.js Essential Training for Data Scientists

Start my 1-month free trial

Adding text

“

- [Instructor] In theory, all you need to add text to your SVG is the text itself because browsers default thex and y coordinates to zero. So let's do that now. Svg.append("text"). Now, to actually set what's inside the text, we use .text rather than .attribute, and we can set the text to hello world!, as that is tradition, I think, and then go back to Firefox and refresh. And we cannot see anything. You may be spotting a theme here. Often when you're writing with D3 code, you add an element and can't see it, and as I've mentioned, the first thing to do is check for DOM. So there we go. We have got a text. And if you can see in the very top left corner of the screen when I'm hovering on that, there's a little blue rectangle up there. Now, what's happened is that the text has been added at coordinates of zero, zero because we didn't specify them to be anything different. When we positioned a rectangle earlier, the x and the y coordinates affected the top left of the rectangle, and with…

Contents