- function randomColor(d) {
- var colors = ["#6baed6", "#9e9ac8", "#9ecae1", "#c7e9c0", "#fd8d3c", "#fdae6b", "#c6dbef", "#fdd0a2", "#74c476", "#a1d99b", "#969696","#dadaeb","bcbddc"];
- var i = d % 12;//
- if(d==-1)
- i= Math.floor(Math.random() *colors.length);
- //console.log(i + " " +colors[i]);
- return colors[i];
- }
- function drawGraph( w = 900, h = 600){
- //var w = 750, h = 500;
- var labelDistance = 0;
- var vis = d3.select("#graph").append("svg:svg").attr("width", w).attr("height", h).attr("stroke","#CCC").attr("stroke-width","2");
- var nodes = [];
- var nodesName = ['Greek', "Latin", "English", "German", "Arabic", "Armenian", "Italian", "Persian", "French"];
- var nodesWeight = [17360, 6264, 66182, 2177, 1162, 953, 609, 62219, 304];
- var linkss = [[2,1,7,3,4,6,8],[2],[],[],[],[3],[],[2,3],[]];
- var weights = [[6594,4519,3662,510,1162,609,304],[1745],[],[],[],[953],[],[57843,714],[]];
- var labelAnchors = [];
- var labelAnchorLinks = [];
- var links = [];
- for(var i = 0; i < nodesName.length; i++) {
- var node = {
- id: i,
- label : nodesName[i],
- weight: nodesWeight[i],
- w: nodesWeight[i],
- color: randomColor(i)
- };
- nodes.push(node);
- labelAnchors.push({
- node : node
- });
- labelAnchors.push({
- node : node
- });
- };
- for(var i = 0; i < nodes.length; i++) {
- for(var j = 0; j < linkss[i].length; j++) {
- links.push({
- source : i,
- target : linkss[i][j],
- weight : Math.ceil(weights[i][j] /4000),
- w : Math.ceil(weights[i][j] /4000),
- color: randomColor(i)
- });
- }
- labelAnchorLinks.push({
- source : i *2,
- target : i *2+1,
- weight : Math.ceil(weights[i][j] /4000),
- w : Math.ceil(weights[i][j] /4000),
- color: randomColor(i)
- });
- };
- 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) {
- console.log(x.w); return x.w;
- });
- force.start();
- var force2 = d3.layout.force().nodes(labelAnchors).links(labelAnchorLinks).gravity(0).linkDistance(Math.ceil(h/5)).linkStrength(8).charge(+300).size([w, h]);
- force2.start();
- var link = vis.selectAll("line.link").data(links).enter().append("svg:line").attr("class", "link").
- style("stroke", function(d) { return d.color}).
- style("stroke-width",function(d){return Math.ceil(d.weight)});
- var node = vis.selectAll("g.node").data(force.nodes()).enter().append("svg:g").attr("class", "node");
- 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);
- node.call(force.drag);
- var anchorLink = vis.selectAll("line.anchorLink").data(labelAnchorLinks)//.enter().append("svg:line").attr("class", "anchorLink").style("stroke", "#999");
- var anchorNode = vis.selectAll("g.anchorNode").data(force2.nodes()).enter().append("svg:g").attr("class", "anchorNode");
- anchorNode.append("svg:circle").attr("r", 0).style("fill", "#FFF");
- anchorNode.append("svg:text").text(function(d, i) {
- return i % 2 == 1 ? "" : d.node.label
- }).style("fill", "#000").style("font-family", "Arial").style("font-size", 11).style("stroke", "#000").style("stroke-width", 0);
- var updateLink = function() {
- this.attr("x1", function(d) {
- return d.source.x;
- }).attr("y1", function(d) {
- return d.source.y;
- }).attr("x2", function(d) {
- return d.target.x;
- }).attr("y2", function(d) {
- return d.target.y;
- });
- }
- var updateNode = function() {
- this.attr("transform", function(d) {
- return "translate(" + d.x + "," + d.y + ")";
- });
- }
- force.on("tick", function() {
- force2.start();
- node.call(updateNode);
- anchorNode.each(function(d, i) {
- if(i % 2 == 0) {
- d.x = d.node.x -20;
- d.y = d.node.y+2 ;
- } else {
- var b = this.childNodes[1].getBBox();
- var diffX = d.x - d.node.x;
- var diffY = d.y - d.node.y;
- var dist = Math.sqrt(diffX * diffX + diffY * diffY);
- var shiftX = b.width * (diffX - dist) / (dist * 2);
- shiftX = Math.max(-b.width, Math.min(0, shiftX));
- var shiftY = 5;
- this.childNodes[1].setAttribute("transform", "translate(" + shiftX + "," + shiftY + ")");
- }
- });
- anchorNode.call(updateNode);
- //
- link.call(updateLink);
- anchorLink.call(updateLink);
- });
- }
Raw Paste