How to plot with d3.js in extjs PANEL

EXTJS and D3 are both powerful. If you do not want to explain them, put the D3 plot directly into an ext tab and directly add the Code:

It can be used to draw a topology.
Ext. define ('EB. view. content. singleview ',{
Extend: 'ext. panel. Panel ',
Alias: 'widget. singleview ',

Layout: 'fit ',

Title: 'Single view ',

InitComponent: function (){
This. callParent (arguments );
},

OnRender: function (){
Var me = this;

Me.doc = Ext. getDoc ();
Me. callParent (arguments );

Me. drawMap ();
},

DrawMap: function (){
Var width = 960, height = 500

Var target = d3.select ("#" + this. id + "-body ");

Var svg = target. append ("svg"). attr ("width", width). attr ("height ",
Height );

Var force = d3.layout. force (). gravity (. 05). distance (100). charge (-100)
. Size ([width, height]);

// Get from: https://github.com/mbostock/d3/wiki/Force-Layout
// Example: force-directed images and labels
D3.json ("graph. json", function (json ){
Force. nodes (json. nodes). links (json. links). start ();

Var link = svg. selectAll (". link"). data (json. links). enter ()
. Append ("line"). attr ("class", "link ");

Var node = svg. selectAll (". node"). data (json. nodes). enter ()
. Append ("g"). attr ("class", "node"). call (force. drag );

Node. append ("image"). attr ("xlink: href ",
Https://github.com/favicon.ico). attr ("x",-8). attr ("y ",
-8). attr ("width", 16). attr ("height", 16 );

Node. append ("text"). attr ("dx", 12). attr ("dy", ". 35em"). text (
Function (d ){
Return d. name
});

Force. on ("tick", function (){
Link. attr ("x1", function (d ){
Return d. source. x;
}). Attr ("y1", function (d ){
Return d. source. y;
}). Attr ("x2", function (d ){
Return d.tar get. x;
}). Attr ("y2", function (d ){
Return d.tar get. y;
});

Node. attr ("transform", function (d ){
Return "translate (" + d. x + "," + d. y + ")";
});
});
});
}

});