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.
<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.
- 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.
- Switching Classes
- 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
- Appending Elements
Next article we will go through SVG fundamentals