Miscellanous tests
Changing styles to a value returned by a JavaScript function
This example selects all divs and sets the value of their
background-color style to a random value produced by a
JavaScript function.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>style</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js"></script>
<script>
function main() {
d3.selectAll('div').style('background-color', function(data, index) {
document.getElementById('out').innerHTML += 'index: ' + index + "<br>";
return '#' + Math.floor(Math.random() * 256).toString(16) +
Math.floor(Math.random() * 256).toString(16) +
Math.floor(Math.random() * 256).toString(16);
})
}
</script>
</head>
<body onload='main();'>
Use <code>selectAll(...).style(..., function())</code> to change the style of selected elements.
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
<div>div 5</div>
<div>div 6</div>
<div>div 7</div>
<div>div 8</div>
<div>div 9</div>
<p>Compare with <a href='selectAll-data-style.html'>selectAll-data-style.html</a>
<h1>Out</h1>
<p id='out'></p>
</body>
</html>
selectAll / data / text / style
This example uses
selectAll to select all
divs, then assigns each div (of which there are four) a color name using the
data() method.
The assigned data is then used to set each div's text (.text()) and modify the background-color style to the value assigned with data():
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>style</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js"></script>
<script>
function main() {
d3.selectAll('div')
.data(['tomato', 'aqua', 'greenyellow', 'yellow'])
.text ( function(data, index) { return 'data: ' + data + ', index: ' + index ; })
.style('background-color', function(data, index) { return data; })
}
</script>
</head>
<body onload='main();'>
Use <code>selectAll(...).data([...]).style(..., function(){ })</code> to change the style of selected elements.
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
<p>Compare with
<a href='style-function.html'>style-function.html</a> and
<a href='selectAll-data-style.html'>selectAll-data-style.html</a>
</body>
</html>
Changing styles
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>d3.select</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js"></script>
<script>
function main() {
d3.select('body').style('background-color', '#fa3');
}
</script>
</head>
<body onload='main();'>
Change the <code>background-color</code> of <code><body></code>.
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>style</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js"></script>
<script>
function main() {
d3.selectAll('div')
.data(['red', 'blue', 'green', 'yellow'])
.style('background-color', function(data, index) {
document.getElementById('out').innerHTML += 'data: ' + data + ', index: ' + index + "<br>";
return data;
})
}
</script>
</head>
<body onload='main();'>
Use <code>selectAll(...).data([...]).style(..., function(){ })</code> to change the style of selected elements.
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
<p>Compare with
<a href='style-function.html'>style-function.html</a> and
<a href='text.html'>text.html</a>
<h1>Out</h1>
<p id='out'></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>d3.selectAll</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js"></script>
<script>
function main() {
d3.selectAll('p').style('background-color', '#ccc');
}
</script>
</head>
<body onload='main();'>
Change the <code>background-color</code> style for all <code><p></code><br><br>
<div>I am a div</div>
<p>Well, I am a p</p>
<div>And I am another div</div>
<p>I am a p, too</p>
</body>
</html>
Change styles with a transition
This example creates for
buttons which call the function
transit with the name of a color.
transit() selects the
<body> element (
d3.select('body')) and uses
.transition() to slowly change the
background-color style of the body to the chosen color.
The optional call to duration() specifies the requested length of the transition in milli-seconds.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>transition</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js"></script>
<script>
function transit(to_color) {
d3.select('body')
.transition()
.duration(1234) // Optional: Set duration of transition in milli-seconds (default: 250 ms)
.style('background-color', to_color)
}
</script>
</head>
<body>
<button onclick="javascript:transit('black' );">Black </button>
<button onclick="javascript:transit('red' );">Red </button>
<button onclick="javascript:transit('green' );">Green </button>
<button onclick="javascript:transit('yellow');">Yellow</button>
</body>
</html>