Summary of Unpopular but Practical Built in Functions in d3.js

Preface

In fact, in the d3.js API document, many built-in functions are provided, but some very useful built-in functions have been ruthlessly ignored. This blog will sort out these forgotten but very practical functions. I hope that after sorting out, they will no longer be forgotten.

selection. classed (name, "value")

The value parameter is optional. If not specified, it returns whether the first non-empty element that matches the name parameter is bound to the specified CSS class. true means bound and false means unbound. If value is specified, the CSS class is added/removed for selection.

This is similar to selection.attr(name,【value】) Very similar, but in comparison, it is much more unpopular, I'm afraid not many people don't know selection.attr(name,【value】) But there are a lot of people who really don't know selection.classed(name,【value】)  .

This function is very practical, for example, the mouse enters some points and highlights them to indicate emphasis. However, after moving out, you can use this function by letting them return to the original style, which avoids the trouble of resetting the style. Sometimes, when restoring the original style, you need to judge, which is even more troublesome.

transition.filter(selector)

Filtering also has transitions, which may be overlooked by many people. For example, at the end of animation, elements with odd indexes are rotated 30 degrees. You can even define your own rules, such as changing elements 5, 10 and 15, and keeping others unchanged.

d3.interpolate(a,b)

Returns a default interpolator between a and b. The type of interpolator depends on the type of b.

1) If b is a color type, the interpolateRgb interpolator is returned

2) If it is a string type, the interpolateString interpolator is returned

3) If it is an array type, the interpolateArray interpolator is returned

4) If it is an object type and cannot be cast to a string type, the interpolateObject interpolator is returned

5) Otherwise, return to the interpolateNumber interpolator

Array correlation API

When using d3, there will be a large number of array operations. If the array-related functions provided by d3 can be used reasonably, the work efficiency will be greatly improved.

d3.ascending(a,b)

Returns 1 if a\ b, and 0 if a=b.

This function is useful when visualization elements need to be ordered, which can help us arrange the order.

d3.min(),d3.max(),d3.extent()

The first two functions should know a lot of people, but the last one is relatively unpopular. It can directly return the minimum and maximum values of array natural sorting, saving the first two functions at the same time.

d3.sum(),d3.mean(),d3.median(),d3.quantile()

Basic summation, average, median, p quantile, all help you to achieve good, before also silly to achieve their own, although not difficult, but the code will be very ugly.

d3.shuffle(array)

The incoming arrays are randomly sorted by Fisher-Yates shuffle algorithm. Will it be higher when you want to get out of order? Hey hey.

d3.keys(object),d3.values(object)

keys returns an array containing all the attribute names in the specified object (associative array). This is very useful, such as using d3.csv() When reading a file, if you want to filter out some irrelevant dimension, such as id, etc., this function is very useful.

d3.map(),d3.set()

Maps and collections are common data structures, but not all js versions have default implementations, but d 3 does. I encountered this problem when I was doing the project yesterday, and finally I borrowed map and set provided by d3 to solve it.

d3. merge (arrays)

Merging the specified parameter arrays to an array is similar to the built-in concat, but it is more convenient when dealing with 2-dimensional arrays.

d3. zip (arrays), d3. pairs (arrays)

d3.zip ("1, 2", "3, 4, 5") returns "1, 3", "2, 4".

d3.pairs ("1, 2, 3, 4") returns "" 1, 2 "," 2, 3 "," 3, 4 "

d3.transpose(matrix)

For transposing a 2-dimensional matrix.

brush

As a visualization system, how can there be no brush! Implementing the brush function is very simple. Before constructing the brush, it is necessary to formulate the x/y scale and empty range. Drawing brushes can be resized and repositioned.

Counting of time

d3.time.dayOfYear(date) The return parameter date is the day of the year, and January 1st is the 0th day.

weekOfYear … and so on the function also has, needs to use when can check API, the province writes the leap year judgment, hey hey.

Layout

Stack(layers【,index】) Let me remember the deepest. When I was doing a project before, I didn't know there was such a thing. I realized it once by myself. Don't worry, it may be decided whether it is right or not.

Geography

Geography of API this piece I am very strange, do not have any opportunity to do this project, so use very little, later have the opportunity to supplement.

Geometry

Also unfamiliar is the content of geometry, such as quadtree/convex hull/polygon/Tai Sen polygon. Just remember that this part has it, and then add it after using it.

Behavior

By zoom and drag two parts, very important but very simple content, I hope to master.

Well, the above is the whole content of this article. I hope the content of this article can bring 1 certain help to your study or work. If you have any questions, you can leave a message for communication.