| <!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="https://d3js.org/d3.v3.min.js"></script> |
| <script> |
| |
| var links = |
| [ |
| {source: '猫[猫科猫属动物]', target: '猫', type: 'resolved', 'rela': '中文学名'}, |
| {source: '猫[猫科猫属动物]', target: 'Felinae', type: 'resolved', 'rela': '拉丁学名'}, |
| {source: '猫[猫科猫属动物]', target: '猫咪、家猫、野猫', type: 'resolved', 'rela': '别称'}, |
| {source: '猫[猫科猫属动物]', target: 'Feliscatus', 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: '猫[猫科猫属动物]', target: '猫种', type: 'resolved', 'rela': '种'}, |
| {source: '猫[猫科猫属动物]', target: '全世界（除南极洲，无野生种）', type: 'resolved', 'rela': '分布区域'}, |
| {source: '猫[猫科猫属动物]', target: 'cat', type: 'resolved', 'rela': '英文名'}, |
| {source: '猫[猫科猫属动物]', target: '猫咪', type: 'resolved', 'rela': '别称'}, |
| {source: '猫[猫科猫属动物]', target: '分布于全世界。', type: 'resolved', 'rela': '分布区域'}, |
| {source: '猫[猫科猫属动物]', target: '猫', type: 'resolved', 'rela': '中文名'}, |
| {source: '猫[猫科猫属动物]', target: 'cat', 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 = 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="#F9EBF9"; |
| 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="#A254A2"; |
| 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> |
|
|
|
|
|
|
|
|
