Shulou(Shulou.com)06/01 Report--

Abstract: in yesterday's push, we described the entry stage of data connection. In this article, we learn about its update and exit mechanism. This article is selected from "Picture D3: sharp tools for data Visualization from entry to Advanced".

Let's go back to the "weirdo" Frank and take a fresh look at his tabloid cover data, take a look at Frank's data for the first three months, and what we've done before.

So far, we have only let the January data "enter" the page and render a series of text elements.

Let the text enter the page.

There are text elements on the page, each representing a data point in the janData. Now we are going to update the page to show the February data. Just like "enter", we select the text element on the page and invoke the data connection with the data () method. The difference is that there are already text elements on the page this time. So, instead of creating new elements, we want to bind data to existing data.

This is "update". We update the element with the new data. Now, because the new data is bound to the element, we can tell the text at the top of the page to read "Jennifer Aniston" instead of "Angelina Jolie" (details will be described in later chapters).

Note that there is no update () method here. With the enter () method call, you create a special set of object placeholders, each of which represents an unbound data point in the dataset. However, in order to update the elements already on the page, you don't need to do this. As long as you create a selection set of these elements, you can tell them to render based on the newly bound data.

You may wonder, what is the eye-catching question mark in the picture above? The reason for its existence is that there were five points in February, compared with four in January. So, how do you operate this fifth data point? It hasn't bound any elements yet!

If you guess that it will automatically "enter" the page at this time, you are wrong. We can use the enter () method call as before.

This time, however, this method will only create one data point with no element association, instead of creating five completely new placeholder elements as before. D3 can meet your requirements very well at this time.

Now, when we call as usual, we can create a new text element, and the data and elements all match again.

Well, let's move our eyes to March. All we have to do is select all the text elements on the page and connect the March data.

However, since there are only four pieces of data in March, there are actually fewer data points than the elements to be bound. Elements with data coming in can be easily updated, but what about elements that don't match the data? Now is the time to "quit". We need to delete the fifth text element (just like an actor leaving the stage), and the exit () method will come in handy. In general, after performing a data connection, we can use the exit () method to select all elements that no longer have data binding. We can then use another method, remove (), to remove it.

In this way, we introduced the whole life process of data connection-- entry, update, and exit. The basic concept of data connection is very simple: graphics always appear on the page, constantly change, and eventually leave the page, just like actors on the stage of the theater, on stage, perform, and exit. D3 handles the rotation of these three states by connecting, binding, and comparing data points and elements. There are only three possible results.

There are more data points than elements. This will trigger the "enter" state (or possibly the "update" state).

There are as many data points as elements. This triggers the Update status.

There are more elements than data points. This will trigger the exit status (or update status).

However, there is something different from the analogy of theater: in a performance, actors must follow the rhythm of going on stage, performing and exiting, but in D3, you don't have to go through all three states. Sometimes, you will use D3 to make a static graph, just call enter (). In other scenarios, data points and elements are consistent, so you never need to call (in fact, this is the case with our bar chart).

This article is selected from "Picture D3: sharp tools for data Visualization from entry to Advanced". Click this link to view this book on the blog Viewpoint website.

For more wonderful articles in time, search for "blog viewpoints" on Wechat or scan the QR code below and follow.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.