[D3.js selection set and data details-5] processing template application, d3.js details

[D3.js selection set and data details-5] processing template application, d3.js details

In [select set and data-4], a processing template for update, enter, and exit is introduced. This template is very common. This article will explain its usage through an example.

1. Template

Review the template mentioned in the previous chapter.

// After the data is bound, return var update = selection for update, enter, and exit respectively. data (dataset); var enter = update. enter (); var exit = update. exit (); // 1. update Method. text (function (d) {return d ;}); // 2. enter. append ("p "). text (function (d) {return d ;}); // 3. processing Method of exit part exit. remove ();

2. Application Template scenarios

This template is remembered when data needs to be updated (add, delete, or change.

3. The column chart of the template should be

Create a column chart to understand the benefits of updating data and using the template. The data of the column chart sometimes needs to be updated, and the column chart also needs to change after the update. For example, to sort data and add new data, the column chart must follow the change. Here, only the rectangle and text of the column chart are drawn, without the coordinate axis. Then, two buttons are added to update the data. Write the drawing code in a function draw (). When the data is updated, call this function again.

Function draw () {// obtain the update part of the rectangle var updateRect = svg. selectAll ("rect "). data (dataset); // obtain the enter part of the rectangle var enterRect = updateRect. enter (); // obtain the exit part of the rectangle var exitRect = updateRect. exit (); // 1. processing Method of update part of rectangle // 2. processing Method of the enter part of the rectangle // 3. how to deal with the exit part of the rectangle // obtain the update part of the text var updateText = svg. selectAll ("text "). data (dataset); // obtain the enter part of the text var enterText = updateText. enter (); // obtain the exit part of the text var exitText = updateText. exit (); // 1. processing Method of text update // 2. how to process the enter part of the text // 3. how to process the exit part of the text}

In the preceding template, update, enter, and exit of the rectangle and text are obtained respectively. Then, process the three parts separately. The following uses the rectangle as an example to explain how to process them separately. The Code is as follows:

// 1. updateRect. attr ("fill", "steelblue") // set the color to steelblue. attr ("x", function (d, I) {// sets the x coordinate return padding of the rectangle. left + I * rectStep ;}). attr ("y", function (d) {// sets the y coordinate return height-padding of the rectangle. bottom-d ;}). attr ("width", rectWidth) // you can specify the width of a rectangle. attr ("height", function (d) {// set the height of the rectangle return d ;}); // 2. enterRect. append ("rect "). attr ("fill", "steelblue") // set the color to steelblue. attr ("x", function (d, I) {// sets the x coordinate return padding of the rectangle. left + I * rectStep ;}). attr ("y", function (d) {// sets the y coordinate return height-padding of the rectangle. bottom-d ;}). attr ("width", rectWidth) // you can specify the width of a rectangle. attr ("height", function (d) {// set the height of the rectangle return d ;}); // 3. processing Method of exit part of rectangle exitRect. remove ();

The Processing Method of the update part is to update the attribute, and the processing method of the enter part is to add the element and then assign it the corresponding attribute. The processing method of the exit part is to delete unnecessary elements. After this processing, the chart automatically changes for the original array dataset, whether it is sorting or adding or removing data. The following two buttons are added in HTML, one for sorting and the other for adding data. Add the following buttons in HTML:

<Button type = "button"> sort </button> <button type = "button"> add data </button>

Two event functions are defined for the two buttons, but when an event is clicked, mysort () and myadd () are called respectively (). The implementation of these two functions is very simple. You only need to call draw () to redraw the data once after processing the data.

Function mysort () {dataset. sort (d3.ascending); // sort draw ();} function myadd () {dataset. push (Math. floor (Math. random () * 100); // Add a draw ();}

After the button is added, the result is as follows:

As the boundary is limited, after adding more data, the rectangle will be out of the boundary, but it does not hinder the meaning of this article.

You can right-click the following URL to view the source code:

Http://www.ourd3js.com/demo/template.html

Thank you for reading.

Document Information

• Copyright Disclaimer: BY-non-commercial (NC)-deduction prohibited (ND)
• Published on: February 1, February 7, 2015
• More content: OUR D3.JS-data visualization special site and CSDN personal blog
• Note: This article is published in OUR D3.JS. For more information, see the source. Thank you.