This is the 8th day of my participation in the August More Text Challenge. For details, see:August is more challenging

What is the use of Edge Bundling
  • While point-to-line diagrams provide intuitive visualization, visual clutter quickly becomes a serious problem when the data has a large number of nodes and edges. The visual clutter in point-to-point diagrams is usually the direct result of Edge congestion. Many researchers have designed various methods to reduce the visual clutter by optimizing the Edge, among which the Edge Bundling method is widely studied and applied
  • Edge binding can effectively reduce the confusion of edges in drawing. It provides the user with a global overview of the complex connection graph, and also provides the user with information about the major connections in the graph through edge thickness and color depth
  • For example, if we want to implement the following example, where more than 500 point-lines end at one point, we use edge binding

Let’s take a look at how this is done

  • Initialize the map
The function initBMap () {var cityCenter = mapv. UtilCityCenter. GetCenterByCityName (' nanjing '); var map = initMap({ tilt: 0, center: [cityCenter.lng, cityCenter.lat], zoom: 6, style: purpleStyle }) return map; }Copy the code
  • To prepare data
    1. Some data sources 
      var nodeData = [ { x:targetCity.lng, y:targetCity.lat } ...... ] ;Copy the code

2. Edge data source

var edgeData = [{ source:0, target:0 } ... ] ;Copy the code
  • Represents from source to target

3. r = mapv.utilForceEdgeBundling().nodes(nodeData).edges(edgeData); We can take a series of two dimensional arrays of points

for(var i=0; i<results.length; i++ ){ var line = results[i]; console.log(line); var coordinates = []; for(var j=0; j<line.length; j++){ coordinates.push([ line[j].x,line[j].y ]) } data.push({ geometry: { type: 'LineString', coordinates }, }); }Copy the code
  • Drawing data source
    1. Initialize layer
    • var view = new mapvgl.View({map});

    1. Initializes the fly line object

      Var lineLayer = new mapvgl.linelayer ({color: ‘rgba(55, 50, 250, 0.3)’, blend:’lighter’})

    2. LinePointLayer this is the little point that’s moving

    • Size Size of a point
    • Speed The speed of a point
    • Color The color of the dot
    • AnimationType the animationType of the point
    • ShapeType The shape of a point
    • How blend points converge