D3

昵稱43421288 2017-06-05

展開全文

<!DOCTYPE html>

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

// http://blog./index.php/mobile-patent-suits-graphic-of-the-day/

var links = [

{source: "同花順", target: "IFIND", type: "resolved", rela:"主營產(chǎn)品"},

{source: "同花順", target: "手機金融信息服務(wù)", type: "resolved", rela:"主營產(chǎn)品"},

{source: "同花順", target: "互聯(lián)網(wǎng)金融信息服務(wù)", type: "resolved", rela:"主營產(chǎn)品"},

{source: "同花順", target: "網(wǎng)上行情交易系統(tǒng)", type: "resolved", rela:"主營產(chǎn)品"},

{source: "同花順", target: "金融資訊及數(shù)據(jù)服務(wù)", type: "resolved", rela:"主營產(chǎn)品"},

{source: "同花順", target: "互聯(lián)網(wǎng)金融", type: "resolved",rela:"主營產(chǎn)品"},

{source: "同花順", target: "金融服務(wù)", type: "resolved",rela:"主營產(chǎn)品"},

{source: "手機金融信息服務(wù)", target: "金融信息服務(wù)", type: "resolved", rela:"上位產(chǎn)品"},

{source: "互聯(lián)網(wǎng)金融信息服務(wù)", target: "金融信息服務(wù)", type: "resolved", rela:"上位產(chǎn)品"},

{source: "二三四五002195", target: "金融信息服務(wù)", type: "resolved", rela:"主營產(chǎn)品"},

{source: "大智慧601519", target: "金融信息服務(wù)", type: "resolved", rela:"主營產(chǎn)品"},

{source: "大智慧601519", target: "互聯(lián)網(wǎng)金融信息服務(wù)", type: "resolved", rela:"主營產(chǎn)品"},

{source: "金融服務(wù)", target: "移動互聯(lián)網(wǎng)", type: "resolved", rela:"上游"},

{source: "金融服務(wù)", target: "互聯(lián)網(wǎng)金融服務(wù)", type: "resolved", rela:"下位產(chǎn)品"},

{source: "金融服務(wù)", target: "綜合金融服務(wù)", type: "resolved", rela:"下位產(chǎn)品"}

];

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格式轉(zhuǎn)化為力學(xué)圖可用的格式

.nodes(d3.values(nodes))//設(shè)定節(jié)點數(shù)組

.links(links)//設(shè)定連線數(shù)組

.size([width, height])//作用域的大小

.linkDistance(180)//連接線長度

.charge(-1500)//頂點的電荷數(shù),。該參數(shù)決定是排斥還是吸引，數(shù)值越小越互相排斥

.on("tick", tick)//指時間間隔,，隔一段時間刷新一次畫面

.start();//開始轉(zhuǎn)換

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")//設(shè)置為strokeWidth箭頭會隨著線的粗細發(fā)生變化

.attr("markerUnits","userSpaceOnUse")

.attr("viewBox", "0 -5 10 10")//坐標(biāo)系的區(qū)域

.attr("refX",32)//箭頭坐標(biāo)

.attr("refY", -1)

.attr("markerWidth", 12)//標(biāo)識的大小

.attr("markerHeight", 12)

.attr("orient", "auto")//繪制方向,，可設(shè)定為：auto（自動確認方向）和角度值

.attr("stroke-width",2)//箭頭寬度

.append("path")

.attr("d", "M0,-5L10,0L0,5")//箭頭的路徑

.attr('fill','#000000');//箭頭顏色

/* 將連接線設(shè)置為曲線

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 ")"; });

*/

//設(shè)置連接線

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;

//根據(jù)關(guān)系的不同設(shè)置線條顏色

if(d.rela=="上位產(chǎn)品" || d.rela=="上游" || d.rela=="下位產(chǎn)品"){

lineColor="#A254A2";

}else if(d.rela=="主營產(chǎn)品"){

lineColor="#B43232";

}

return lineColor;

})

.style("pointer-events", "none")

.style("stroke-width",0.5)//線條粗細

.attr("marker-end", "url(#resolved)" );//根據(jù)箭頭標(biāo)記的id號標(biāo)記箭頭

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'

});

//設(shè)置線條上的文字

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數(shù)據(jù)

.enter().append("circle")

.style("fill",function(node){

var color;//圓圈背景色

var link=links[node.index];

if(node.name==link.source.name && link.rela=="主營產(chǎn)品"){

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=="主營產(chǎn)品"){

color="#B43232";

}else{

color="#A254A2";

}

return color;

})

.attr("r", 28)//設(shè)置圓圈半徑

.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);//將當(dāng)前選中的元素傳到drag函數(shù)中,，使頂點可以被拖動

/*

circle.append("text")

.attr("dy", ".35em")

.attr("text-anchor", "middle")//在圓圈內(nèi)添加文字

.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=="主營產(chǎn)品"){

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），指向綁定的數(shù)據(jù)中比選定元素集多出的一部分元素,。

.enter()

.append("text")

.attr("dy", ".35em")

.attr("text-anchor", "middle")//在圓圈中加上數(shù)據(jù)

.style('fill',function(node){

var color;//文字顏色

var link=links[node.index];

if(node.name==link.source.name && link.rela=="主營產(chǎn)品"){

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）,，指向綁定的數(shù)據(jù)中比選定元素集多出的一部分元素,。

.enter()

.append("text")

.attr("x", 150)//設(shè)置文字坐標(biāo)

.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)';

}

});

}

//設(shè)置連接線的坐標(biāo),使用橢圓弧路徑段雙向編碼

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

}

//設(shè)置圓圈和文字的坐標(biāo)

function transform1(d) {

return "translate(" d.x "," d.y ")";

}

function transform2(d) {

return "translate(" (d.x) "," d.y ")";

}

</script>

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點,。請注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購買等信息，謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請點擊一鍵舉報。

久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

D3