D3.js 力導向圖（氣泡+線條+箭頭+文字）

時間  2019-11-26
標籤 d3.js 導向 氣泡 線條 箭頭 文字 欄目 JavaScript 简体版
原文   原文鏈接 
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

#licensing {
  fill: green;
}

.link.licensing {
  stroke: green;
}

.link.resolved {
  stroke-dasharray: 0,2 1;
}

circle {
  fill: #ccc;
  stroke: #333;
  stroke-width: 1.5px;
}

text {
  font: 12px Microsoft YaHei;
  pointer-events: none;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}

.linetext {
    font-size: 12px Microsoft YaHei;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

// http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/
var links = [
  {source: "同花順", target: "IFIND", type: "resolved", rela:"主營產品"},
  {source: "同花順", target: "手機金融信息服務", type: "resolved", rela:"主營產品"},
  {source: "同花順", target: "互聯網金融信息服務", type: "resolved", rela:"主營產品"},
  {source: "同花順", target: "網上行情交易系統", type: "resolved", rela:"主營產品"},
  {source: "同花順", target: "金融資訊及數據服務", type: "resolved", rela:"主營產品"},
  {source: "同花順", target: "互聯網金融", type: "resolved",rela:"主營產品"},
  {source: "同花順", target: "金融服務", type: "resolved",rela:"主營產品"},
  {source: "手機金融信息服務", target: "金融信息服務", type: "resolved", rela:"上位產品"},
  {source: "互聯網金融信息服務", target: "金融信息服務", type: "resolved", rela:"上位產品"},
  {source: "二三四五002195", target: "金融信息服務", type: "resolved", rela:"主營產品"},
  {source: "大智慧601519", target: "金融信息服務", type: "resolved", rela:"主營產品"},
  {source: "大智慧601519", target: "互聯網金融信息服務", type: "resolved", rela:"主營產品"},
  {source: "金融服務", target: "移動互聯網", type: "resolved", rela:"上游"},
  {source: "金融服務", target: "互聯網金融服務", type: "resolved", rela:"下位產品"},
  {source: "金融服務", target: "綜合金融服務", type: "resolved", rela:"下位產品"}
];

var nodes = {};

links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});

var width = 1560,
    height = 800;

var force = d3.layout.force()//layout將json格式轉化爲力學圖可用的格式
    .nodes(d3.values(nodes))//設定節點數組
    .links(links)//設定連線數組
    .size([width, height])//做用域的大小
    .linkDistance(180)//鏈接線長度
    .charge(-1500)//頂點的電荷數。該參數決定是排斥仍是吸引，數值越小越互相排斥
    .on("tick", tick)//指時間間隔，隔一段時間刷新一次畫面
    .start();//開始轉換

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

//箭頭
var marker=
    svg.append("marker")
    //.attr("id", function(d) { return d; })
    .attr("id", "resolved")
    //.attr("markerUnits","strokeWidth")//設置爲strokeWidth箭頭會隨着線的粗細發生變化
    .attr("markerUnits","userSpaceOnUse")
    .attr("viewBox", "0 -5 10 10")//座標系的區域
    .attr("refX",32)//箭頭座標
    .attr("refY", -1)
    .attr("markerWidth", 12)//標識的大小
    .attr("markerHeight", 12)
    .attr("orient", "auto")//繪製方向，可設定爲：auto（自動確認方向）和 角度值
    .attr("stroke-width",2)//箭頭寬度
    .append("path")
    .attr("d", "M0,-5L10,0L0,5")//箭頭的路徑
    .attr('fill','#000000');//箭頭顏色

/* 將鏈接線設置爲曲線
var path = svg.append("g").selectAll("path")
    .data(force.links())
    .enter().append("path")
    .attr("class", function(d) { return "link " + d.type; })
    .style("stroke",function(d){
        //console.log(d);
       return "#A254A2";//鏈接線的顏色
    })
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
*/

//設置鏈接線    
var edges_line = svg.selectAll(".edgepath")
    .data(force.links())
    .enter()
    .append("path")
    .attr({
          'd': function(d) {return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y},
          'class':'edgepath',
          //'fill-opacity':0,
          //'stroke-opacity':0,
          //'fill':'blue',
          //'stroke':'red',
          'id':function(d,i) {return 'edgepath'+i;}})
    .style("stroke",function(d){
         var lineColor;
         //根據關係的不一樣設置線條顏色
         if(d.rela=="上位產品" || d.rela=="上游" || d.rela=="下位產品"){
             lineColor="#A254A2";
         }else if(d.rela=="主營產品"){
             lineColor="#B43232";
         }
         return lineColor;
     })
    .style("pointer-events", "none")
    .style("stroke-width",0.5)//線條粗細
    .attr("marker-end", "url(#resolved)" );//根據箭頭標記的id號標記箭頭

var edges_text = svg.append("g").selectAll(".edgelabel")
.data(force.links())
.enter()
.append("text")
.style("pointer-events", "none")
//.attr("class","linetext")
.attr({  'class':'edgelabel',
               'id':function(d,i){return 'edgepath'+i;},
               'dx':80,
               'dy':0
               //'font-size':10,
               //'fill':'#aaa'
               });

//設置線條上的文字
edges_text.append('textPath')
.attr('xlink:href',function(d,i) {return '#edgepath'+i})
.style("pointer-events", "none")
.text(function(d){return d.rela;});

//圓圈
var circle = svg.append("g").selectAll("circle")
    .data(force.nodes())//表示使用force.nodes數據
    .enter().append("circle")
    .style("fill",function(node){
        var color;//圓圈背景色
        var link=links[node.index];
        if(node.name==link.source.name && link.rela=="主營產品"){
            color="#F6E8E9";
        }else{
            color="#F9EBF9";
        }
        return color;
    })
    .style('stroke',function(node){ 
        var color;//圓圈線條的顏色
        var link=links[node.index];
        if(node.name==link.source.name && link.rela=="主營產品"){
            color="#B43232";
        }else{
            color="#A254A2";
        }
        return color;
    })
    .attr("r", 28)//設置圓圈半徑
    .on("click",function(node){
        //單擊時讓鏈接線加粗
        edges_line.style("stroke-width",function(line){
            console.log(line);
            if(line.source.name==node.name || line.target.name==node.name){
                return 4;
            }else{
                return 0.5;
            }
        });
        //d3.select(this).style('stroke-width',2);
    })
    .call(force.drag);//將當前選中的元素傳到drag函數中，使頂點能夠被拖動
    /*
     circle.append("text")  
    .attr("dy", ".35em")  
    .attr("text-anchor", "middle")//在圓圈內添加文字  
    .text(function(d) { 
        //console.log(d);
        return d.name; 
    }); */ 

  //圓圈的提示文字
  circle.append("svg:title")  
        .text(function(node) { 
            var link=links[node.index];
            if(node.name==link.source.name && link.rela=="主營產品"){
                return "雙擊可查看詳情"
            }
         });  
/* 矩形
var rect=svg.append("rect")
         .attr({"x":100,"y":100,
                "width":100,"height":50,
                "rx":5,//水平圓角
                "ry":10//豎直圓角
             })
          .style({
             "stroke":"red",
             "stroke-width":1,
             "fill":"yellow"
});*/
var text = svg.append("g").selectAll("text")
    .data(force.nodes())
    //返回缺失元素的佔位對象（placeholder），指向綁定的數據中比選定元素集多出的一部分元素。
    .enter()
    .append("text")
    .attr("dy", ".35em")  
    .attr("text-anchor", "middle")//在圓圈中加上數據  
    .style('fill',function(node){
        var color;//文字顏色
        var link=links[node.index];
        if(node.name==link.source.name && link.rela=="主營產品"){
            color="#B43232";
        }else{
            color="#A254A2";
        }
        return color;
    }).attr('x',function(d){
        // console.log(d.name+"---"+ d.name.length);
        var re_en = /[a-zA-Z]+/g;
        //若是是全英文，不換行
        if(d.name.match(re_en)){
             d3.select(this).append('tspan')
             .attr('x',0)
             .attr('y',2)
             .text(function(){return d.name;});
        }
        //若是小於四個字符，不換行
        else if(d.name.length<=4){
             d3.select(this).append('tspan')
            .attr('x',0)
            .attr('y',2)
            .text(function(){return d.name;});
        }else{
            var top=d.name.substring(0,4);
            var bot=d.name.substring(4,d.name.length);

            d3.select(this).text(function(){return '';});

            d3.select(this).append('tspan')
                .attr('x',0)
                .attr('y',-7)
                .text(function(){return top;});

            d3.select(this).append('tspan')
                .attr('x',0)
                .attr('y',10)
                .text(function(){return bot;});
        }
        //直接顯示文字    
        /*.text(function(d) { 
        return d.name; */
    });

/*  將文字顯示在圓圈的外面 
var text2 = svg.append("g").selectAll("text")
     .data(force.links())
    //返回缺失元素的佔位對象（placeholder），指向綁定的數據中比選定元素集多出的一部分元素。
    .enter()
    .append("text")
    .attr("x", 150)//設置文字座標
    .attr("y", ".50em")
    .text(function(d) { 
        //console.log(d);
        //return d.name; 
        //return d.rela;
        console.log(d);
        return  '1111';
    });*/

function tick() {
  //path.attr("d", linkArc);//鏈接線
  circle.attr("transform", transform1);//圓圈
  text.attr("transform", transform2);//頂點文字
  //edges_text.attr("transform", transform3);
  //text2.attr("d", linkArc);//鏈接線文字
  //console.log("text2...................");
  //console.log(text2);
  //edges_line.attr("x1",function(d){ return d.source.x; });
  //edges_line.attr("y1",function(d){ return d.source.y; });
  //edges_line.attr("x2",function(d){ return d.target.x; });
  //edges_line.attr("y2",function(d){ return d.target.y; });
    
  //edges_line.attr("x",function(d){ return (d.source.x + d.target.x) / 2 ; });
  //edges_line.attr("y",function(d){ return (d.source.y + d.target.y) / 2 ; });


  edges_line.attr('d', function(d) { 
      var path='M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y;
      return path;
  });  
    
  edges_text.attr('transform',function(d,i){
        if (d.target.x<d.source.x){
            bbox = this.getBBox();
            rx = bbox.x+bbox.width/2;
            ry = bbox.y+bbox.height/2;
            return 'rotate(180 '+rx+' '+ry+')';
        }
        else {
            return 'rotate(0)';
        }
   });
}

//設置鏈接線的座標,使用橢圓弧路徑段雙向編碼
function linkArc(d) {
    //var dx = d.target.x - d.source.x,
  // dy = d.target.y - d.source.y,
     // dr = Math.sqrt(dx * dx + dy * dy);
  //return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
  //打點path格式是：Msource.x,source.yArr00,1target.x,target.y  
  
  return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y
}
//設置圓圈和文字的座標
function transform1(d) {
  return "translate(" + d.x + "," + d.y + ")";
}
function transform2(d) {
      return "translate(" + (d.x) + "," + d.y + ")";
}



</script>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程