JAVASCRIPT   73
randomColor
Guest on 2nd February 2023 01:26:56 AM


  1. function randomColor(d) {
  2.  
  3.     var colors = ["#6baed6", "#9e9ac8", "#9ecae1", "#c7e9c0", "#fd8d3c", "#fdae6b", "#c6dbef", "#fdd0a2", "#74c476", "#a1d99b", "#969696","#dadaeb","bcbddc"];
  4.     var i = d % 12;//
  5.     if(d==-1)
  6.         i= Math.floor(Math.random() *colors.length);
  7.     //console.log(i + " " +colors[i]);
  8.     return colors[i];
  9. }
  10.  
  11.  
  12. function drawGraph( w = 900,  h = 600){
  13.  
  14.     //var w = 750, h = 500;
  15.  
  16.     var labelDistance = 0;
  17.  
  18.     var vis = d3.select("#graph").append("svg:svg").attr("width", w).attr("height", h).attr("stroke","#CCC").attr("stroke-width","2");
  19.  
  20.     var nodes = [];
  21.     var nodesName = ['Greek', "Latin", "English", "German", "Arabic", "Armenian", "Italian", "Persian", "French"];
  22.     var nodesWeight = [17360, 6264, 66182, 2177, 1162, 953, 609, 62219, 304];
  23.     var linkss = [[2,1,7,3,4,6,8],[2],[],[],[],[3],[],[2,3],[]];
  24.     var weights = [[6594,4519,3662,510,1162,609,304],[1745],[],[],[],[953],[],[57843,714],[]];
  25.     var labelAnchors = [];
  26.     var labelAnchorLinks = [];
  27.     var links = [];
  28.  
  29.     for(var i = 0; i < nodesName.length; i++) {
  30.         var node = {
  31.             id: i,
  32.             label : nodesName[i],
  33.             weight: nodesWeight[i],
  34.             w: nodesWeight[i],
  35.             color: randomColor(i)
  36.         };
  37.         nodes.push(node);
  38.         labelAnchors.push({
  39.             node : node
  40.         });
  41.         labelAnchors.push({
  42.             node : node
  43.         });
  44.     };
  45.  
  46.     for(var i = 0; i < nodes.length; i++) {
  47.  
  48.         for(var j = 0; j < linkss[i].length; j++) {
  49.  
  50.             links.push({
  51.                 source : i,
  52.                 target : linkss[i][j],
  53.                 weight : Math.ceil(weights[i][j] /4000),
  54.                 w : Math.ceil(weights[i][j] /4000),
  55.                 color: randomColor(i)
  56.             });
  57.         }
  58.         labelAnchorLinks.push({
  59.             source : i *2,
  60.             target : i *2+1,
  61.             weight : Math.ceil(weights[i][j] /4000),
  62.             w : Math.ceil(weights[i][j] /4000),
  63.             color: randomColor(i)
  64.         });
  65.     };
  66.  
  67.     var force = d3.layout.force().size([w, h]).nodes(nodes).links(links).gravity(1).linkDistance(Math.ceil(h/5)).charge(function(d){  var k=-6000;  return k;}).linkStrength(function(x) {
  68.       console.log(x.w);  return x.w;
  69.     });
  70.     force.start();
  71.  
  72.     var force2 = d3.layout.force().nodes(labelAnchors).links(labelAnchorLinks).gravity(0).linkDistance(Math.ceil(h/5)).linkStrength(8).charge(+300).size([w, h]);
  73.     force2.start();
  74.  
  75.     var link = vis.selectAll("line.link").data(links).enter().append("svg:line").attr("class", "link").
  76.     style("stroke", function(d) { return d.color}).
  77.     style("stroke-width",function(d){return Math.ceil(d.weight)});
  78.  
  79.     var node = vis.selectAll("g.node").data(force.nodes()).enter().append("svg:g").attr("class", "node");
  80.     node.append("svg:circle").attr("r", function(d){ w =Math.ceil(d.w/15000)* 7; return w;  }).style("fill", function(d) { return d.color}).style("stroke", "#000").style("stroke-width", 0);
  81.     node.call(force.drag);
  82.  
  83.  
  84.     var anchorLink = vis.selectAll("line.anchorLink").data(labelAnchorLinks)//.enter().append("svg:line").attr("class", "anchorLink").style("stroke", "#999");
  85.  
  86.     var anchorNode = vis.selectAll("g.anchorNode").data(force2.nodes()).enter().append("svg:g").attr("class", "anchorNode");
  87.     anchorNode.append("svg:circle").attr("r", 0).style("fill", "#FFF");
  88.     anchorNode.append("svg:text").text(function(d, i) {
  89.         return i % 2 == 1 ? "" : d.node.label
  90.     }).style("fill", "#000").style("font-family", "Arial").style("font-size", 11).style("stroke", "#000").style("stroke-width", 0);
  91.  
  92.     var updateLink = function() {
  93.         this.attr("x1", function(d) {
  94.             return d.source.x;
  95.         }).attr("y1", function(d) {
  96.             return d.source.y;
  97.         }).attr("x2", function(d) {
  98.             return d.target.x;
  99.         }).attr("y2", function(d) {
  100.             return d.target.y;
  101.         });
  102.  
  103.     }
  104.  
  105.     var updateNode = function() {
  106.         this.attr("transform", function(d) {
  107.             return "translate(" + d.x + "," + d.y + ")";
  108.         });
  109.  
  110.     }
  111.  
  112.  
  113.     force.on("tick", function() {
  114.  
  115.         force2.start();
  116.  
  117.         node.call(updateNode);
  118.  
  119.         anchorNode.each(function(d, i) {
  120.             if(i % 2 == 0) {
  121.                 d.x = d.node.x -20;
  122.                 d.y = d.node.y+2  ;
  123.             } else {
  124.                 var b = this.childNodes[1].getBBox();
  125.  
  126.                 var diffX = d.x - d.node.x;
  127.                 var diffY = d.y - d.node.y;
  128.  
  129.                 var dist = Math.sqrt(diffX * diffX + diffY * diffY);
  130.  
  131.                 var shiftX = b.width * (diffX - dist) / (dist * 2);
  132.                 shiftX = Math.max(-b.width, Math.min(0, shiftX));
  133.                 var shiftY = 5;
  134.                 this.childNodes[1].setAttribute("transform", "translate(" + shiftX + "," + shiftY + ")");
  135.             }
  136.         });
  137.  
  138.  
  139.         anchorNode.call(updateNode);
  140. //
  141.         link.call(updateLink);
  142.         anchorLink.call(updateLink);
  143.  
  144.     });
  145.  
  146. }
Raw Paste

Login or Register to edit or fork this paste. It's free.