I wouldn’t say that the D3 docs are beginner friendly. Some things just aren’t clear for the novice D3 user. But, you could argue that D3 isn’t meant for the novice user. It’s fairly low-level when it comes to graphing libraries. In fact, most of the popular graphing libraries are simply a wrapper on D3, abstracting away the more complicated concepts.
One of those important concepts is how to select elements with D3. Which is probably one of the first things any user will do when building a visualization. You’d first select the
g element you want to work on via
d3.select('svg') then continue to use that element as needed.
Sometimes, you have more than one
svg element on a page. Using
d3.select('svg') in that case will be problematic. What you’ll want to do instead is use d3 select by id to get the specific element you want to interact with. This, of course, assumes you’re using unique
id attributes in your html elements. Which is something you should always do.
The question then becomes how do you select an element using d3 select by id? The simple answer is that you use the
# symbol with your
id attribute value when calling
# signal is interpretted by d3 to mean that you’re looking for the
id attribute value.
<div id="my-element"> Hello </div>
const myElement = d3.select('#my-element'); // Change the color value or perform any other operations on the element myElement.style('color', 'red');
As shown above, once you have selected the element by its
id value you can perform whatever operations on it you’d like. It can become the basis for complex visuals or just to change the text color. The main point is that d3 can interact with any element, and you can select any element by more than just the html tag name.