图结构可视化JavaScript

<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>

<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var links = 
[
{source: 'OmegaXYZ', target: 'ideas', 'rela': '', type: 'resolved'},
{source: 'OmegaXYZ', target: '技术域', 'rela': '', type: 'resolved'},
{source: 'OmegaXYZ', target: '未分类', 'rela': '', type: 'resolved'},
{source: 'OmegaXYZ', target: '转载', 'rela': '', type: 'resolved'},
{source: 'ideas', target: '常识', 'rela': '', type: 'resolved'},
{source: 'ideas', target: '研究生', 'rela': '', type: 'resolved'},
{source: 'ideas', target: '程序人生', 'rela': '', type: 'resolved'},
{source: 'ideas', target: '随笔', 'rela': '', type: 'resolved'},
{source: '技术域', target: 'APP开发', 'rela': '', type: 'resolved'},
{source: 'APP开发', target: 'Android', 'rela': '', type: 'resolved'},
{source: '技术域', target: 'Web开发', 'rela': '', type: 'resolved'},
{source: 'Web开发', target: 'CSS', 'rela': '', type: 'resolved'},
{source: 'Web开发', target: 'HTML', 'rela': '', type: 'resolved'},
{source: 'Web开发', target: 'JavaScript', 'rela': '', type: 'resolved'},
{source: 'Web开发', target: 'WordPress', 'rela': '', type: 'resolved'},
{source: '技术域', target: '其他', 'rela': '', type: 'resolved'},
{source: '技术域', target: '基础教程', 'rela': '', type: 'resolved'},
{source: '技术域', target: '操作系统', 'rela': '', type: 'resolved'},
{source: '操作系统', target: 'Linux', 'rela': '', type: 'resolved'},
{source: '操作系统', target: 'macOS', 'rela': '', type: 'resolved'},
{source: '操作系统', target: 'Windows', 'rela': '', type: 'resolved'},
{source: '操作系统', target: '操作系统原理', 'rela': '', type: 'resolved'},
{source: '技术域', target: '数据库', 'rela': '', type: 'resolved'},
{source: '数据库', target: 'SQL', 'rela': '', type: 'resolved'},
{source: '技术域', target: '数据结构', 'rela': '', type: 'resolved'},
{source: '技术域', target: '机器学习', 'rela': '', type: 'resolved'},
{source: '机器学习', target: '深度学习', 'rela': '', type: 'resolved'},
{source: '机器学习', target: '特征选择', 'rela': '', type: 'resolved'},
{source: '机器学习', target: '知识图谱', 'rela': '', type: 'resolved'},
{source: '机器学习', target: '社交网络', 'rela': '', type: 'resolved'},
{source: '技术域', target: '汇编语言', 'rela': '', type: 'resolved'},
{source: '技术域', target: '算法', 'rela': '', type: 'resolved'},
{source: '算法', target: '动态规划', 'rela': '', type: 'resolved'},
{source: '算法', target: '多目标优化算法', 'rela': '', type: 'resolved'},
{source: '算法', target: '贪心算法', 'rela': '', type: 'resolved'},
{source: '技术域', target: '编译原理', 'rela': '', type: 'resolved'},
{source: '技术域', target: '网络原理', 'rela': '', type: 'resolved'},
{source: '技术域', target: '计算机图形学', 'rela': '', type: 'resolved'},
{source: '技术域', target: '计算机组成原理', 'rela': '', type: 'resolved'},
{source: '技术域', target: '软件工程', 'rela': '', type: 'resolved'},
{source: '技术域', target: '量化投资', 'rela': '', type: 'resolved'},
{source: '技术域', target: '高级语言', 'rela': '', type: 'resolved'},
{source: '高级语言', target: 'C&C++', 'rela': '', type: 'resolved'},
{source: '高级语言', target: 'JAVA', 'rela': '', type: 'resolved'},
{source: '高级语言', target: 'JavaScript&HTML', 'rela': '', type: 'resolved'},
{source: '高级语言', target: 'Matlab', 'rela': '', type: 'resolved'},
{source: '高级语言', target: 'Python', 'rela': '', type: 'resolved'},
];

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 = 1920, height = 1080;

var force = d3.layout.force()
    .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", "resolved")
    .attr("markerUnits","userSpaceOnUse")
    .attr("viewBox", "0 -5 10 10")
    .attr("refX",32)
    .attr("refY", -1)
    .attr("markerWidth", 12)
    .attr("markerHeight", 12)
    .attr("orient", "auto")
    .attr("stroke-width",2)
    .append("path")
    .attr("d", "M0,-5L10,0L0,5")
    .attr('fill','#000000');

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',
          'id':function(d,i) {return 'edgepath'+i;}})
    .style("stroke",function(d){
         var lineColor;
		 lineColor="#B43232";
         return lineColor;
     })
    .style("pointer-events", "none")
    .style("stroke-width",0.5)
    .attr("marker-end", "url(#resolved)" );

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

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())
    .enter().append("circle")
    .style("fill",function(node){
        var color;
        var link=links[node.index];
		color="#00BFFF";
        return color;
    })
    .style('stroke',function(node){ 
        var color;
        var link=links[node.index];
		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;
            }
        });
    })
    .call(force.drag);

var text = svg.append("g").selectAll("text")
    .data(force.nodes())
    .enter()
    .append("text")
    .attr("dy", ".35em")  
    .attr("text-anchor", "middle")
    .style('fill',function(node){
        var color;
        var link=links[node.index];
		color="#000000";
        return color;
    }).attr('x',function(d){
        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;});
        }
    });

function tick() {
  circle.attr("transform", transform1);
  text.attr("transform", transform2);

  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) {
  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>