WHAT

D3 stands for Data-driven Documents. D3.js is a JavaScript library that manipulates Documents based on Data. D3 helps you use HTML, SVG, and CSS for your data. D3 emphasizes web standards to give you the full functionality of modern browsers without their own proprietary framework, combining powerful visual components and data-driven DOM manipulation methods.

D3 is a library that specializes in data visualization for 2D scenes

WHY

There are already plenty of JS libraries in the community that deal with data visualization, so why learn about D3?

Highly encapsulated libraries such as Echarts and HighCharts can run well on PC and mobile devices and are compatible with most current browsers. Common bar charts, pie charts and line charts are well encapsulated and can be directly used by developers without much work

In the development process, there are some visual requirements that need to be personalized display, such as Echarts, HighCharts and other libraries are not well supported, so the more flexible D3 is needed. D3 is like a paintbrush, allowing you to use your wisdom and talent freely in the browser, giving you more freedom

D3 can provide a good degree of freedom, which means that it is more difficult to get started and more expensive to learn than a configured visual library like Echarts. As for which library to choose in a project, it needs to be combined with the project requirements and the ability of the team members

Several common visualization libraries NPM comparison

HOW

How do you learn about D3?

In fact, no matter what kind of technology to learn from zero, as an ordinary grassroots code farmers nothing more than to watch videos, official documents and relevant documents these several main channels, if there are relevant gods around can get twice the result with half the effort

The next step is to start with the omnipotent Hello Word

hello word

Create an empty H1 tag on the page, and then use D3 to change the content of the H1 to Hello Word

<h1></h1>

<script type="text/javascript">
  window.onload = function () {
    // Get the DOM of h1 and replace its contents with Hello Word
    const h = d3.select('h1').text('hello word')

    // Change the font color and size of the h1 tag
    h
      .style('color'.'blue')
      .style('font-size'.'40px')};</script>
Copy the code

Writing a Hello Word using D3 is as simple as that. The overall feeling of use is not very similar to the old JQ

Common API

Select elements

  • d3.select()
    • Selects the first of all specified elements
  • d3.selectAll()
    • Selects all of the specified elements

Data binding

One of the unique features in D3 is the ability to bind data to the DOM

There are two main functions to bind data

  1. Datum (): binds a piece of data to the selection element
  2. Data (): Binds an array to the selected element. The values of the array are bound to each element of the selected element, relative todatumMore commonly used
  • Use datum to bind data
<h1></h1>
<h1></h1>
<h1></h1>

<script type="text/javascript">
  window.onload = function () {
    // Get the DOM selection set for h1
    d3.selectAll("h1")
      .datum("datum bind data")
      .text((data, index) = > {
        // Data is the datum bound data, index is the index of the selected element
        // The return data is the content displayed within the selected element on the page
        return `${data} ${index}`
      });
  };
</script>
Copy the code

The three H1 tags on the page appear as

datum bind data 0
datum bind data 1
datum bind data 2
Copy the code
  • Use data to bind data
<h1></h1>
<h1></h1>
<h1></h1>

<script type="text/javascript">
  window.onload = function () {
    // Define an array of data bound data
    const arr = ['apple'.'banana'.'watermelon']

    // Get the DOM selection set for h1
    d3.selectAll("h1")
      .data(arr) // Bind the data in the ARR to the corresponding data in the H1 selection set
      .text((data, index) = > {
        // Data is the datum bound data, index is the index of the selected element
        // The return data is the content displayed within the selected element on the page
        return data
      });
  };
</script>
Copy the code

The three H1 tags on the page appear as

Apple banana watermelonCopy the code

Note that if the number of ARR is less than the number of h1 data sets, the original data in the tags of elements whose length exceeds the ARR will be displayed

Select, insert, and delete elements

We’ve covered select and selectAll, and the concept of a select set. This section explains how to use these two functions.

Suppose there are three paragraph elements in the body:

<p>Apple</p>
<p>Pear</p>
<p>Banana</p>

Copy the code

Now, complete the task of selecting each of the four elements.

Select the first p element
t("p");
p1.style("color","red");

Copy the code
Select three P elements
var p = body.selectAll("p");
p.style("color"."red");
Copy the code
Select the second P element

There are several ways to do this, but one is to simply add an ID number to the second element.

Pear

Then, use select to select the element, noting that the id name is preceded by a # sign in the parameter.

var p2 = body.select("#myid");
p2.style("color","red");

Copy the code
Select the last two P elements

Add class to the last two elements,

<p class="myclass">Pear</p>
<p class="myclass">Banana</p>

Copy the code

Since you need to select multiple elements, use selectAll. Note that the argument, class name is preceded by a dot.

var p = body.selectAll(".myclass");
p.style("color"."red");
Copy the code

Insert elements

There are two functions involved in inserting elements:

  • Append () : Inserts elements at the end of the selection set
  • Insert () : Inserts elements before the selection set

Suppose there are three paragraph elements, the same as above.

append()

body.append("p")
    .text("append p element");

Copy the code

Adding a P element to the end of the body results in:

Apple
Pear
Banana
append p element

Copy the code

insert()

Add a paragraph element in the body before the element whose ID is myID.

body.insert("p","#myid")
  .text("insert p element");

Copy the code

The ID of the Pear paragraph has been specified as myID, so the result is as follows.

Apple
insert p element
Pear
Banana

Copy the code

Remove elements

To remove an element, use remove for the selected element. For example:

var p = body.select("#myid");
p.remove();
Copy the code

🏆 technology project phase iii | data visualization of those things…