If you know jQuery, it makes manipulating and working with DOM elements very easy. Think of D3js as jQuery made for data which makes manipulating the DOM according to data super easy. D3js also comes with vitalization specific features which will we go through another series of articles. This article is to get a knowledge on D3js fundamentals.
Pre-requisites :
- HTML
- CSS
- Javascript
SetUp
-
<script src="https://d3js.org/d3.v5.min.js"></script>
CDN way - NPM way
npm install d3
We will stick to CND way for the sake of keeping it simple to make beginners understand easily. Just include the script tag inside the head of your html file and you are good to go.
1.Selection
- d3.select("selection query")
- d3.selectAll("selection query")
Open console by pressing f12, there will be logs of the selections at the end.
click on HTML, CSS or JS tabs to look at the code
Most of the functions in d3js returns the context, that means you can chain your functions one after the other, You will see such chaining in next examples.
2.DOM Manipulation
- Styling
d3.select("*selection query*").style("color","red")
- Attributes
d3.select("*selection query*").attr("width","20%")
- Switching Classes
d3.select("*selection query*").classed("active","true")
- Inner Text
d3.select("*selection query*").text("Some Text")
- Inserting HTML
-
d3.select("*selection query*").html("<div class="block"></div><div>0 - 10</div>")
-
- Changing Properties
d3.selectAll('.checkbox').property('checked', false)
- Appending Elements
-
d3.select("*selection query*").append("*tag*")
-
Next article we will go through SVG fundamentals
Top comments (3)
Nice approach, starting from the very basics is quite important to get a proper grip over this library.
Like your article very much. Could advice how can i get to use console from smartphone
You need a different browser, Try this ?