修改样式..加入大小的控制

doc/example/webkit-dep-pre.js

@@ -7,45 +7,42 @@ var links = [];
 var categories = [{
     name : 'HTMLElement',
     keyword : /^HTML/,
+    base : 'HTMLElement',
     itemStyle : {
         normal: {
-            brushType : 'both',
-            color : '#D0D102',
-            strokeColor : '#5182ab',
-            lineWidth : 2
+            brushType : 'fill',
+            color : '#58b4c1',
         }
     }
 }, {
     name : 'WebGL',
     keyword : /^WebGL/,
+    base : 'WebGLRenderingContext',
     itemStyle : {
         normal: {
-            brushType : 'both',
-            color : '#01A4A4',
-            strokeColor : '#5182ab',
+            brushType : 'fill',
+            color : '#4F57AA',
             lineWidth : 2
         }
     }
 }, {
     name : 'SVG',
     keyword : /^SVG/,
+    base : 'SVGElement',
     itemStyle : {
         normal: {
-            brushType : 'both',
-            color : '#00A1CB',
-            strokeColor : '#5182ab',
-            lineWidth : 2
+            brushType : 'fill',
+            color : '#72818B',
         }
     }
 }, {
     name : 'CSS',
     keyword : /^CSS/,
+    base : 'CSSRule',
     itemStyle : {
         normal: {
-            brushType : 'both',
-            color : '#61AE24',
-            strokeColor : '#5182ab',
-            lineWidth : 2
+            brushType : 'fill',
+            color : '#8F002E',
         }
     }
 }, {
@@ -53,10 +50,7 @@ var categories = [{
     keyword : /.*/,
     itemStyle : {
         normal: {
-            brushType : 'both',
-            // color : '#E54028',
-            strokeColor : '#5182ab',
-            lineWidth : 2
+            brushType : 'fill',
         }
     }
 }];
@@ -84,7 +78,7 @@ function getNodeIdx(name){
 
         nodes.push({
             name : name,
-            value : 1,
+            value : calculateValue(name),
             category : findCategory(name)
         });
     }
@@ -99,6 +93,15 @@ function findCategory(name){
     }
 }
 
+function calculateValue(name){
+    for (var i = 0; i < categories.length; i++) {
+        if (name === categories[i].base){
+            return 3;
+        }
+    }
+    return 1;
+}
+
 var res = {
     type : "force",
     categories : categories,

doc/example/webkit-dep.html

@@ -37,7 +37,17 @@
 
                 myChart = ec.init(document.getElementById("Main"));
                 webkitDepData.minRadius = 5;
-                webkitDepData.density = 1;
+                webkitDepData.maxRadius = 8;
+                webkitDepData.density = 1.1;
+                webkitDepData.attractiveness = 1.1;
+                webkitDepData.itemStyle = {
+                    normal : {
+                        linkStyle : {
+                            opacity : 0.2
+                        }
+                    }
+                }
+
                 myChart.setOption({
                     tooltip : {
                         trigger: 'item'

doc/example/webkit-dep.js

@@ -4,23 +4,22 @@ define({
         {
             "name": "HTMLElement",
             "keyword": {},
+            "base": "HTMLElement",
             "itemStyle": {
                 "normal": {
-                    "brushType": "both",
-                    "color": "#D0D102",
-                    "strokeColor": "#5182ab",
-                    "lineWidth": 2
+                    "brushType": "fill",
+                    "color": "#58b4c1"
                 }
             }
         },
         {
             "name": "WebGL",
             "keyword": {},
+            "base": "WebGLRenderingContext",
             "itemStyle": {
                 "normal": {
-                    "brushType": "both",
-                    "color": "#01A4A4",
-                    "strokeColor": "#5182ab",
+                    "brushType": "fill",
+                    "color": "#4F57AA",
                     "lineWidth": 2
                 }
             }
@@ -28,24 +27,22 @@ define({
         {
             "name": "SVG",
             "keyword": {},
+            "base": "SVGElement",
             "itemStyle": {
                 "normal": {
-                    "brushType": "both",
-                    "color": "#00A1CB",
-                    "strokeColor": "#5182ab",
-                    "lineWidth": 2
+                    "brushType": "fill",
+                    "color": "#72818B"
                 }
             }
         },
         {
             "name": "CSS",
             "keyword": {},
+            "base": "CSSRule",
             "itemStyle": {
                 "normal": {
-                    "brushType": "both",
-                    "color": "#61AE24",
-                    "strokeColor": "#5182ab",
-                    "lineWidth": 2
+                    "brushType": "fill",
+                    "color": "#8F002E"
                 }
             }
         },
@@ -54,9 +51,7 @@ define({
             "keyword": {},
             "itemStyle": {
                 "normal": {
-                    "brushType": "both",
-                    "strokeColor": "#5182ab",
-                    "lineWidth": 2
+                    "brushType": "fill"
                 }
             }
         }
@@ -339,7 +334,7 @@ define({
         },
         {
             "name": "CSSRule",
-            "value": 1,
+            "value": 3,
             "category": 3
         },
         {
@@ -749,7 +744,7 @@ define({
         },
         {
             "name": "HTMLElement",
-            "value": 1,
+            "value": 3,
             "category": 0
         },
         {
@@ -1599,7 +1594,7 @@ define({
         },
         {
             "name": "SVGElement",
-            "value": 1,
+            "value": 3,
             "category": 2
         },
         {
@@ -2364,7 +2359,7 @@ define({
         },
         {
             "name": "WebGLRenderingContext",
-            "value": 1,
+            "value": 3,
             "category": 1
         },
         {

src/chart/force.js

@@ -133,8 +133,9 @@ define(function(require) {
                     linkShapes = [];
 
                     var area = viewportWidth * viewportHeight;
+                    var attractiveness = self.deepQuery([serie], 'attractiveness');
                     // Formula in 'Graph Drawing by Force-directed Placement'
-                    k = 0.5 * Math.sqrt( area / nodesRawData.length );
+                    k = 0.5 / attractiveness * Math.sqrt( area / nodesRawData.length );
                     
                     // 这两方法里需要加上读取self.selectedMap判断当前系列是否显示的逻辑
                     _buildLinkShapes(nodesRawData, linksRawData);

src/config.js

@@ -441,6 +441,7 @@ define(function() {
             minRadius : 10,
             maxRadius : 20,
             density : 1.0,
+            attractiveness : 1.0,
             // 分类里如果有样式会覆盖节点默认样式
             categories : [],
             itemStyle: {