D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
mukhtyar
Full window
Github gist
D3 - Selections
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } main { margin: 0 auto; } img { width: 400px; } .blur { filter: blur(3px); } </style> </head> <body> <header> <h1>WELCOME</h1> </header> <nav> <ul> <a href="home"> <li>Home</li> </a> <a href="gallery"> <li>Gallery</li> </a> <a href="contact"> <li>Contact</li> </a> </ul> </nav> <div id="hero"> <img src="https://images.unsplash.com/photo-1465935343323-d742334bcbda?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925"> </div> <div class="main"> <div class="container"> <section> <div class="item"> <h2>Lorem ipsum dolor</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p> <time>9 August 2016</time> </div> <div class="item"> <h2>Lorem ipsum dolor</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <time>9 August 2016</time> </div> </section> </div> </div> <script> // Selects the element with an id="hero" attribute d3.select('#hero'); // Selects all elements with CSS class primary d3.selectAll('.item'); // Select all divs on the page var divs1 = d3.selectAll('div'); //console.log(divs1); // Select all divs within container var divs2 = d3.select('.container').selectAll('div'); //console.log(divs2); /* ATTRIBUTE - getter and setter */ // Get href attribute of first link d3.select('a').attr('href'); //console.log(d3.select('a').attr('href')); // Set href attribute of first link d3.select('a').attr('href', 'https://cal-adapt.org'); //console.log(d3.select('a').attr('href')); /* STYLE - getter and setter */ // Get text color of first link var color = d3.select('a').style('color'); //console.log(color); // Set first link's text color to red //d3.select('a').style('color', 'red'); /* CLASS - getter and setter */ // Does img classList include 'blur'? d3.select('img').classed('blur'); // Set href attribute of first link //d3.select('img').classed('blur', true); </script> </body>
https://d3js.org/d3.v4.min.js