Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

D3 data connection: enter

2025-01-28 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Database >

Share

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

Introduction: data connection is bread and butter in D3. D3 does not provide the basic functions for mapping. Instead, it relies on data connections. Data connection allows page elements to enter the page, and once entered, it can be modified, updated, and exited. This article will mainly introduce the "entry" part.

This article is selected from "Picture D3: sharp tools for data Visualization from entry to Advanced".

What is a data connection

As the name implies, a data connection must connect data to something. These things are one or a group of things on a web page--

< rect>

< circle>

< div>

All the common elements that are questionable. Specifically, it is a D3 selection set of these common elements.

Before we go any further, let's forget about D3 for a while. Now, imagine an interactive graph that you have seen before, written by yourself, or just imagined, with some graphics that represent data and buttons that control whether some data is displayed or not. When you click these buttons, the graphics change: the position shifts, glows or flashes, the color changes, and you can even fly off the screen together-as crazy as you want.

Now, no matter how complex your graphics are and how much data they contain, at the basic level, the shapes involved (or lines, text labels, colors, and textures) are just doing the following three things.

Display on the page-there can be no data visualization without data and graphics, so the graphics need to be displayed.

Transform-when you click the button or adjust the slider, the properties of the graph will be updated according to the latest data you want to see.

Leave the page-sometimes, if one or more graphics represent data that is no longer valid, it will be completely removed from the page.

There are three things like this. An interactive graphic is like a theater. When performing, the actor enters the stage, performs the program, and then exits. In data visualization, shapes-or, more generally, graphic elements-enter the page, update themselves, and then exit.

The data connection takes full advantage of the above preliminary ideas. When in use, you can instruct graphic elements to enter, update, and exit. (in fact, I brought the words "enter", "update" and "exit" directly from D3. )

In addition, D3 allows you to perform all of the above operations based on data. D3 achieves this capability through a technique called data binding. Whenever a data connection is performed, the data is actually associated or bound to an element. This is really convenient. D3 makes it very easy for you to bind data. So, you say, "well, rectangle, how much data are you binding? 35? well, well, I hope your width is exactly that wide."

To illustrate how data connections work, I intend to introduce a new example-- an example that covers all aspects of the basic concepts of data connections. In order to build the previous bar chart of population distribution, we will also introduce a data connection, but it will not be described as complete. So, although it's a little beside the point, introducing a new example will help us to study all aspects of data connections.

This article covers only a portion of the knowledge of data connections, focusing on the "entry" part of its entire life cycle. In a later push, we will use the same example to elaborate on the "update" and "exit" sections.

All right, here we go.

Suppose you have a friend whose name is Frank. One of Frank's hobbies is that he likes to read celebrity gossip magazines and various gossip newspapers. Us Weekly, people and the National Investigator are the kind of publications you will catch a glimpse of when you stand in line at the grocery store and get bored. Frank is sure to have a strong interest. The problem is, he doesn't really care about Kim and Kanye, he just wants to know one thing: who's on the cover?

Frank has recently been watching featured celebrities on the covers of more than 20 different magazines and periodicals, with about 50 different covers in a month-for a year. In addition, he has studied the various cover characters over the past four years. "I think the celebrities who are talked about at any time reflect the spirit of this country," Frank said. You have your doubts, but when Frank comes to you and asks you to help him visualize the information, you can't refuse.

Frank's idea is to show the top five celebrities on a monthly basis, based on nearly five years of data he has collected. He wants the visual graphics to be interactive and animated, but he doesn't know what the graphics should look like. However, you do have ideas. You draw in your notebook for a few minutes, give Frank a sketch, and then begin to explain.

Sketches prepared for Frank

"the graph shows the list of the oldest celebrities in the data set, which is the top five celebrities in January 2009," you explained to him. Then, each celebrity's name is a bar, representing the number of times he or she has appeared on the magazine cover this month. In this way, it is clear which celebrity has the dominant position. Frank has two ways to switch to subsequent months: he can press the play button and sit down to watch (because the graphics are automatically displayed by month), or he can drag the slider to the specified month. When a graph changes from one month to another, the new name enters the list, the old name exits, some moves up and down the list, and the width of the bar expands or shrinks to the updated value. "Great!" Frank exclaimed. Then he sends you the remaining 3000 lines of data as well.

Enter, update, exit... D3 was born for this!

Enter and bind data

Suppose you've compiled some data, added a cover for every month and every celebrity, and sorted it. The following picture shows the information you compiled for the first three months, that is, from January to March 2009 (these numbers are all made up, of course).

Data for the first three months

Here are some explanations for these data.

The number of people on the cover is not always exactly 50. This is because some covers contain two celebrities, in this case, the cover belongs to these two people.

There are only four celebrities on all the covers in January, and most journals are following the stories of Brad Pitt and Angelina Jolie. Is this what Frank calls the national spirit? )

February is similar to January, except for World Newsweek, the cover of all other magazines is the famous "Batboy".

A good way to organize this data through JavaScript is to create a series of object arrays. For example, in January we have the following array.

Var janData = [{name: "Angelina Jolie", covers:20, rank:1}, {name: "Brad Pitt", covers:18, rank:2}, {name: "Jennifer Aniston", covers:10, rank:3}, {name: "Britney Spears", covers:8, rank:4}]

Can you see why this structure is so friendly? The array janData contains four data objects, each containing all the information that a data point should have. We will explain more details about the data structure in Chapter 7.

All right, priority: we need to display some graphics on the page. Now, let's forget about these bars and start with only the names of these characters. We can use the for loop to add a text node for each name, but we're not going to do that. Forget the for loop, we're thinking about data connections, and we want the text to "enter" the page.

The way to do this is to first create a selection set for all the text elements on the current page, and then connect the data to it. But, wait... Our page is blank and there are no text elements yet! So, what exactly does "select all text elements" mean?

What is shown here is the "magic" of D3 entering its stage-creating a selection set of elements that do not exist through d3.selectAll (). In this case, because we want the text to enter the page, we can select all of these non-existent paragraph elements through d3.selectAll ("p"). The concept is as follows.

An empty selection set

Then, you call two methods on the selection set, data () and enter (). This "combination punch" has a truly amazing effect: it creates an object for each data point in the dataset. Yes, that's it-you don't have to tell D3 how big your data set is. Just connect it to an empty selection set and it will create the correct number of objects for you.

Magic of data () and enter ()

At first, this data is just for placeholders-- text elements haven't really been added to the page yet. To do this, we have to use our old friend append (). We will attach a paragraph element to all the placeholder data.

Replace placeholder data with text elements

Now, we have placed four text elements on the page, but there is no text in it, so our page is blank. How to get the names of those celebrities displayed in the right place? The secret lies in the data () method. This method actually performs a data connection-- when D3 performs a data connection, it binds the data to the element. So, each text element actually has a data associated with or bound to it, as shown in the figure above.

D3 allows us to easily bind data, so we can use the data to tell what the text should display and where to display: "all right, elements, look at your own data points." What's the name of your celebrity? Angelina Jolie? Okay, that's what I want your text to show. Besides, where should it rank? Number one? All right, you can get to the top! "

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Database

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report