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