4.7 KiB
| title |
|---|
| Modifying elements in D3 |
Introduction
We took a detailed look at various functions used to select DOM elements in D3 in the D3 DOM Selectors section. There we used many functions such as style, attr and html to perform changes on the selected items, in this section we shall take a detailed look at these functions used for Modifying elements. Any of these functions can be chained together to perform any number of changes.
style()
The style function is used to change the style of an element, it will add the style to the elements existing styles.
d3.select('h1')
.style('text-decoration', 'overline')
.style('color', 'red');
Notice how we changed the text-decoration and color of an <h1> element selected using d3.select. As we discussed earlier notice how we were able to chain two style calls together.
attr()
attr function can be used to change or add any attribute to a selected element.
d3.select('div')
.attr('background', '#1547e2')
.attr('class', 'big');
Here we are setting the background color of a selected division to be #1547e2 and its class to big.
classed()
Notice how we added a class to a div in the previous example using attr(), consider a case where we only want to add or remove a class from an existing list of classes. This is where classed() comes into action. You can use classed to add/remove a class from the existing class attribute.
<div class="classone classtwo classthree"></div>
<script>
d3.select('div')
.classed('classtwo', false)
.classed('classfour', true);
</script>
The above example will remove the class named classtwo from the list of classes we provided for the div element in the html, and add a new class named classfour.
text() and html()
text() can be used to change the text content inside an element. On the other hand html() can be used to add any html content into element.
// text()
d3.select('div').text('New Text');
// html()
d3.select('div').html('<span>Awesome</span>');
property()
property() can be used to change a property of an element like checked. The same can be done with attribute too.
<input type="checkbox">
<script>
d3.select('input[type=checkbox]')
.attr('checked', true);
</script>
Using functions for updations
In all of the above examples we have used the second argument directly, but you could also use a function to return your required values.
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
d3.selectAll('div')
.style('background', function (d, i) {
if (i % 2 == 0) {
// even
return 'red';
}
return 'green';
})
.style('height', '20px');
</script>
The function can have two arguments supplied to it, the first one named d in the above example will be given if you have any data joined to your selection, checkout D3 data joins section for more information. The second argument is the index i of the selected items. We are actually using this information to determine whether the div is even or odd and return the color red when it is even and green color when odd.
Normally we use anonymous functions as the arguments but you can also use named functions. For example :
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
function evenColor(d, i) {
if (i % 2 == 0) {
// even
return 'red';
}
return 'green';
}
d3.selectAll('div')
.style('background', evenColor)
.style('height', '20px');
</script>
Both of the above examples gives the same result. So if you have some reusable logic, then it is always better to use a named function.
Adding Event Handlers
D3 is very much known for interactable data visualizations. Having to handle events is a huge part of supporting interactions. You can add event handlers to your selection by using the on() function.
<button>Click me to change my color</button>
<script>
d3.selectAll('button')
.on('click', function (d, i) {
d3.select(this)
.style('background', 'red');
});
</script>
One thing you may notice here is that we are using the arguments d and i as mentioned before, these work the same way. One thing that is additional here is the context this, it refers to the element that triggered the event, but since it is a DOM element we have to select it using d3.select() inorder for it to be used as a d3 element selection.