D3 Selections A core concept of D3 are selections D3 selection are based on CSS selections They allow you to select one or more elements on a web page Morever it allows you to modify append or remove elements in relation to your dataset s Selection Methods There aer two main methods for selecting elements these are select lets you select one DOM element by matching the given CSS selector If there are more than one element for the given selector it selects the first one selectAll lets you select multiple elements by matching the given CSS selector Let s look at each of these in detail with corresponding examples select method In CSS selectors you can define and access HTML elements in one of three ways Tag identifier of HTML element e g div h1 span p h2 Class Name of the HTML element ID of the HTML element The D3 select method selects the HTML method based on the CSS selectors Let s look at examples of each Selection by Tag Using the HTML TAG name you can select the HTML elements The following example selects the div tag elements d3 select div Examples Selection by Tag Name For this example you ll create a HTML page with some TAGS i e div elements then select and modify their content As you ll notice below you ll include the D3 script you add a div tag then you write your script code at the bottom of the page between the script tags The code selects the div gets the text using text which you output to the console window DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body div Hello D3 World by tag name div script let val d3 select div text console log val script body html Selection by Class name HTML elements styled using CSS classes can be selected using the following syntax d3 select class name Let s look at another example below but this time you ll select the HTML element using the class name DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body div class hello Hello D3 World by class name div script let val d3 select hello text console log val script body html You should notice when selecting an element using the class name you need to include the dot before the name e g hello was the class name in the example above Selection by ID Typically every element on a HTML should have a unique ID assigned to it You assign a unique ID to an element using the id keyword You can then retrieve the element using the select method and the elements ID You ll use the following syntax d3 select id of element Let s look at a practical example below that accesses the element using the id i e in the example this id is called world DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body div id world Hello D3 World by id div script let val d3 select world text console log val script body html Note remember that for class names you should append a dot while for tag ids you d append a hash to the front of the name When using the tag identifier e g div span h1 no extra details need to be appended Adding DOM Elements Once you can select elements from the DOM you re then able to extract add and modify them For example as with the text method which let you access the elements contents you can also use another method called append to insert add elements into the existing HTML document append method The append method as the name might suggest appends a new element as the last child of the current selection This method can also modify the style of the element its attributes properties HTML and text content Let s take a look at a simple example DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body div class world Hello D3 World div script let val d3 select div world append span console log val val is the new span val text test script body html In the example above you ll notice that you select the div tag with the class name hello You then call the append method to add the new element of type span as a child If you were to look at the html it would be equivalent to div class world span test span div The return from the append method is also the new element i e span Which you can use the text method to retreive or set the text content Note you can also chain method calls in a single line known as the chain syntax if prefer this over putting each method and return on seperate lines For example instead of storing the newly appended span tag you could simply call the text method directly on the returned value d3 select div world append span text test For example on seperate lines let div d3 select hello let span div append span span text test or using the chain syntax which enables you to perform several actions in a single line of code d3 select hello append span text test Modifying Elements D3 has numerous methods for modifying the DOM Three important methods that you ll learn about are html attr style These methods are especially important for managing the content and style of elements in the DOM html method The html method is used to modify the html content of the selected or appended element As shown below in the example you can use the html method to insert text or add tags as you would using HTML DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body div class world Hello D3 World div script d3 select world html Hello span from D3 span script body html attr method The attr method is used to add or update the attributes of an element In the following example you ll select an element and add some color information i e styling DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body div class world Hello D3 World div script d3 select world attr style color red script body html style method The style method is used to set the style property of the selected elements DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body div class world Hello D3 World div script d3 select world style color green script body html attr vs style While not always transparent the attr and style methods may seem very similar However the attr sets attributes on the element while the style method can only modify details within the style area For example if you look at the HTML text style fill red vs text fill red which are both legal in SVG but using attr when you need style could trip you up if you use it for something else The classed method The classed method is used to set the class attribute of the HTML element Since an element can have multiple classses but only a single unique id the classed method makes this easier to manage When setting class attributes be sure to use the classed method As the classed method knows how to handle one or more class name attributes that are formatted and arranged to align with the desired specification Add class true to add a class to an element you call the classed method with the name of the class to add and the true parameter d3 select hello classed hot true Remove class false to remove a class you follow the same syntax as the add but you pass false as the second parameter to the classed method d3 select hello classed hot false Check class to check if the class exists just leave off the second parameter and pass the name of the class you re looking for returns true if it exists and false if not Toggle class to flip or toggle a class to the opposite state remove it if it exists already or add it if it does not exist yet you would do the following d3 select hello classed hot d3 select hello classed hot or on multiple lines let hello d3 select hello let has hello classed hot hello classed hot has selectAll method The select method was only capable of selecting a single element However the selectAll methodallows you to select multiple elements in the HTML document The selectAll follows the same syntax as the select method but returns all the elements that meet the critera specified in the input string e g all the elements that have a matching class name not just the first If the selectAll method cannot find any matching elements based on the name criteria you ve provided it returns empty selection DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body div class world Hello D3 World div script return empty no elements D3 can t find the elements based on the select criteria console log d3 select wor2ld typo wor2ld instead of world console log d3 selectAll wor2ld console log d3 selectAll wor2ld console log d3 selectAll world correct spelling script body html As with the select method you can also use append html text attr style and classed with the selectAll method The difference is the affected changes will be applied to all the selected items not just a single item The following example changes the color of all the elements with the class name hot to red Notice both the h1 and div tag style color properties are changed as they have the class name hot associated with them Yet the span tag remains unchanged DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body h1 class hot Heading h1 div class hot Once upon a time div span there was span script d3 selectAll hot style color red script body html
d3 select hello append span text test Modifying Elements D3 has numerous methods for modifying the DOM Three important methods that you ll learn about are html attr style These methods are especially important for managing the content and style of elements in the DOM html method The html method is used to modify the html content of the selected or appended element As shown below in the example you can use the html method to insert text or add tags as you would using HTML DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body div class world Hello D3 World div script d3 select world html Hello span from D3 span script body html attr method The attr method is used to add or update the attributes of an element In the following example you ll select an element and add some color information i e styling DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body div class world Hello D3 World div script d3 select world attr style color red script body html style method The style method is used to set the style property of the selected elements DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body div class world Hello D3 World div script d3 select world style color green script body html attr vs style While not always transparent the attr and style methods may seem very similar However the attr sets attributes on the element while the style method can only modify details within the style area For example if you look at the HTML text style fill red vs text fill red which are both legal in SVG but using attr when you need style could trip you up if you use it for something else The classed method The classed method is used to set the class attribute of the HTML element Since an element can have multiple classses but only a single unique id the classed method makes this easier to manage When setting class attributes be sure to use the classed method As the classed method knows how to handle one or more class name attributes that are formatted and arranged to align with the desired specification Add class true to add a class to an element you call the classed method with the name of the class to add and the true parameter d3 select hello classed hot true Remove class false to remove a class you follow the same syntax as the add but you pass false as the second parameter to the classed method d3 select hello classed hot false Check class to check if the class exists just leave off the second parameter and pass the name of the class you re looking for returns true if it exists and false if not Toggle class to flip or toggle a class to the opposite state remove it if it exists already or add it if it does not exist yet you would do the following d3 select hello classed hot d3 select hello classed hot or on multiple lines let hello d3 select hello let has hello classed hot hello classed hot has selectAll method The select method was only capable of selecting a single element However the selectAll methodallows you to select multiple elements in the HTML document The selectAll follows the same syntax as the select method but returns all the elements that meet the critera specified in the input string e g all the elements that have a matching class name not just the first If the selectAll method cannot find any matching elements based on the name criteria you ve provided it returns empty selection DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body div class world Hello D3 World div script return empty no elements D3 can t find the elements based on the select criteria console log d3 select wor2ld typo wor2ld instead of world console log d3 selectAll wor2ld console log d3 selectAll wor2ld console log d3 selectAll world correct spelling script body html As with the select method you can also use append html text attr style and classed with the selectAll method The difference is the affected changes will be applied to all the selected items not just a single item The following example changes the color of all the elements with the class name hot to red Notice both the h1 and div tag style color properties are changed as they have the class name hot associated with them Yet the span tag remains unchanged DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body h1 class hot Heading h1 div class hot Once upon a time div span there was span script d3 selectAll hot style color red script body html