Selecting a single element

It is very common that at times you will need to select a single element on a page to perform some visual manipulation. This recipe will show you how to perform a targeted single element selection in D3 using a CSS selector.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter2/single-selection.html .

How to do it...

Let's select something (a paragraph element perhaps) and produce the classic hello world on screen.

<p id="target"></p> <!-- A --> 
 
<script type="text/javascript"> 
    d3.select("p#target") // <-- B 
    .text("Hello world!"); // <-- C 
</script> 

This recipe simply produces text Hello world! on your screen.

How it works...

The d3.select ...

Get Data Visualization with D3 4.x Cookbook - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.