D3JS Technical Documentation

D3JS Technical Documentation

Overview

D3 allows you-bind arbitrary data to a Document Object Model (DOM), and then apply Data-driven transformations to the D Ocument. For example, you can use the D3 to generate a HTML table from an array of numbers. Or, use the same data to create a interactive SVG bar chart with smooth transitions and interaction.

D3 is not a monolithic framework, that seeks to provide every conceivable feature. Instead, D3 solves the crux of the problem:efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility, exposing the full capabilities of the Web Standa RDS such as CSS3, HTML5 and SVG. With minimal overhead, D3 are extremely fast, supporting large datasets and dynamic behaviors for interaction and animation . D3 ' s functional style allows code reuse through a diverse collection of components and plugins.

Characteristics

The full name of D3 is (Data-driven documents), as the name implies, is a JavaScript class library of data-driven documents. To put it simply, d3.js is primarily used to manipulate data by injecting life into your data using HTML, SVG, and CSS, which translates to a variety of easy-to-understand, brilliant graphics.

D3 is one of the most popular visualization libraries and is used by many other tabular plugins. It allows you to bind arbitrary data to the DOM and then apply the data-driven transformation to the document. You can use it to create a basic HMTL table with an array, or use its fluid excesses and interactions to create amazing SVG bar graphs with similar data.

Environment and Installation D3js

Environment:windows 7

Installation method: in HTTPS://GITHUB.COM/MBOSTOCK/D download D3 compressed package, unzip it into the project directory containing the D3 JS library. For example, this article uses the ROR environment development, then will extract the good d3.js file into the C:\Users\Administrator\Desktop\portal-ec2\app\assets\javascripts directory.

Job description

The topology of the corresponding switches and virtual machines in the project is represented by D3JS. The topology of switches and virtual machines is stored in an in-project database (MySQL), which uses D3JS to visualize data relationships in the database by using the Ruby language.

There are 3 tables in the database to represent this topological relationship:

1. Switch_type: Indicates whether the switch is a physical switch or a virtual switch

2. Switch_to_switch: Indicates the connection relationship between switches

3. Vm_to_switch: Represents the connection relationship between a virtual machine and a switch

Work flow

1. Exporting data from a database

Remove the database data from the corresponding controller and put the corresponding instance variable

#存储拓扑

def topo

@vts = Vmtoswitch.all

@sts = Switchtoswitch.all

@stvs = Switchtovswitch.all

End

Store the data in the resulting instance variable in the corresponding views file

<% vts_size = @vts. Size%>

<% sts_size = @sts. Size%>

<% stvs_size = @stvs. Size%>

<% all_size = vts_size + sts_size + stvs_size%>

<% v_and_s = array.new (all_size)%>

<% for I in 0..sts_size-1 do%>

<% V_and_s[i] = @sts [i]%>

<% End%>

<% for I in Sts_size. Sts_size+vts_size-1 do%>

<% V_and_s[i] = @vts [I-sts_size]%>

<% End%>

<% for I in Sts_size+vts_size. All_size do%>

<% V_and_s[i] = @vts [I-sts_size-vts_size]%>

<% End%>

In this way, all relationships are already stored in the v_and_s array.

2. Generate topological relationships for your data

Generate a point in a topological relationship and put it in the nodes array

for (i = 0;i < idnum-vts_size; ++i)//switch into nodes

{

var Node1 = {

"Name": Ids[i],

"Type": "Circle",

"Switch_type": Hashtable2[ids[i]]

};

Nodes.push (Node1);

}

for (i = Idnum-vts_size;i < Idnum; ++i)//put VM into nodes

{

var Node1 = {

"Name": Ids[i],

"Type": "Rect",

"Switch_type": "Rect"};

Nodes.push (Node1);

}

Generate an edge in a topological relationship and put it in the edges array

for (i = 0; i < all_size; ++i)

{

var SS = Hashtable[all_array[i][0]];

var TT = hashtable[all_array[i][2]]

var desc = all_array[i][1];

var edges1 = {

"Source": SS,

"Target": TT,

"Des": desc

};

Edges.push (EDGES1);

}

This will generate an array of data objects as shown below, in order to correspond to the corresponding function in the D3JS

Nodes: [

{Name: "S1", type: "Cicle", Switch_type: "1"},

{Name: "S2", type: "Cicle", Switch_type: "1"},

{Name: "S3", type: "Rect", Switch_type: "2"}

]

Edges: [

{source:0, target:1, des: "S1"},

{source:0, Target:2, des: "S2"},

{source:1, Target:2, des: "S3"}

]

3. Generate the corresponding graphics using the data

The following work is done in the JS script, the JS script embedded in the HTML page to achieve the visualization function

Add an SVG graphic at the end of the BODY element

var svg = d3.select ("Body"). Append ("SVG")

. attr ("width", W)

. attr ("height", h);

Generating a force-oriented model using the D3JS library (topological diagram)

var force = D3.layout.force ()

. nodes (nodes)

. Links (edges)

. Size ([w, H])

. linkdistance ([150])

. charge ([-3000]);

Force.start (); Launch model

Create edges in a drawing

var edges = Svg.selectall ("line")

. Data (Dataset.edges)

. Enter ()

. Append ("line")

. Style ("Stroke", Stroke_color)

. Style ("Stroke-width", Stroke_width)

. Call (Force.drag);

Generate points in a drawing

var node = Svg.selectall ("node");

node = Node.data (Dataset.nodes);

var nodeenter = Node.enter (). Append ("G")

. attr ("Class", "Node")

. Call (Force.drag);

Nodeenter.append ("Circle")

. attr ("R", 10)

. Style ("Fill", function (d, i) {

return color (i); })

4. Complete

Finally, open the corresponding HTML page to see a similar topology diagram

Other questions

In the process of learning D3, we need to understand the corresponding JS language knowledge, which corresponds to the application of anonymous function is very much, you can learn accordingly.

One of the most painful things to do in a topological relationship is to put a rectangle and a circle in an SVG graphic and make them satisfy the corresponding relationship so that the function cannot be used to make a graphic selection, and I do this by adding a rectangle and a circle at the same point. You can then display the circle or make the rectangle appear based on the attribute type of the point, making the effect of connecting the circles and rectangles together!

Reference

Official Document: http://d3js.org/

Official force-oriented Model learning document: Https://github.com/mbostock/d3/wiki/Force-Layout

Official resources: HTTPS://GITHUB.COM/MBOSTOCK/D3

D3JS Technical Documentation