I am working on telecom project in which i have to show some churn customers who are connecting over a network i am using this api http://bl.ocks.org/samuelleach/5497403 to show the relationship,it suits my purpose very clearly but the problem is that when i hover on a certain node in this api it shows only the relationship with its current neighbor. But i need to show the whole relationship in this graph when i hover on that,i.e each node will show the relationship with its immediate neighbor and also with the previous one.can anyone help me to do that???
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style>
@charset "utf-8";
/* CSS Document */
.link10 {
stroke: #000;
stroke-width: 2px;
stroke-dasharray: 3, 3;
}
.link1 {
stroke: #000;
stroke-width: 2px;
}
.nodetext {
pointer-events: none;
}
.node.type1 {
fill: #690011;
}
.node.type2 {
fill: #BF0426;
}
.node.type3 {
fill: #E5B96F;
}
.node.type4 {
fill: #FFFFFF;
stroke: #1695A3;
stroke-width: 3px;
}
.node.type5 {
fill: #1BC9E0;
}
.node.type6 {
fill: #E01B98;
}
image.circle {
cursor: pointer;
}
.fadein {
display: none;
font-size: 20px;
}
.rectD {
background-color: #000000;
width: 70px;
height: 30px
}
.rectL {
background-color: #000000;
width: 90px;
height: 30px
}
</style>
<script src="http://d3js.org/d3.v2.js?2.9.1"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
<script>
var data = {
"nodes" : [ {
"name" : "JEET",
"full_name" : "Yahoo",
"type" : 5,
"slug" : "www.yahoo.com",
"entity" : "company",
"img_hrefD" : "",
"img_hrefL" : ""
}, {
"name" : "SATISH",
"full_name" : "Google",
"type" : 2,
"slug" : "www.google.com",
"entity" : "company",
"img_hrefD" : "",
"img_hrefL" : ""
}, {
"name" : "RAHUL",
"full_name" : "Bing",
"type" : 6,
"slug" : "www.bing.com",
"entity" : "company",
"img_hrefD" : "",
"img_hrefL" : ""
}, {
"name": "DANIEL",
"full_name":"Yandex",
"type":2,
"slug":"www.yandex.com",
"entity":"company",
"img_hrefD":"",
"img_hrefL":""
},
{
"name" : "Desc1",
"type" : 4,
"slug" : "",
"entity" : "description"
}, {
"name" : "Desc2",
"type" : 4,
"slug" : "",
"entity" : "description"
}, {
"name" : "Desc4",
"type" : 4,
"slug" : "",
"entity" : "description"
},
{
"name" : "SHYAM",
"prefix" : "Mr.",
"fst_name" : "Jim",
"snd_name" : "Bean",
"type" : 1,
"slug" : "",
"entity" : "employee"
}, {
"name" : "PETER",
"prefix" : "Ms.",
"fst_name" : "Jenna",
"snd_name" : "Jameson",
"type" : 3,
"slug" : "",
"entity" : "employee"
}, {
"name" : "ALEX",
"prefix" : "Mr.",
"fst_name" : "Lucky",
"snd_name" : "Luke",
"type" : 3,
"slug" : "",
"entity" : "employee"
}, {
"name" : "MURFY",
"prefix" : "Ms.",
"fst_name" : "Pamela",
"snd_name" : "Anderson",
"type" : 1,
"slug" : "",
"entity" : "employee"
}, {
"name" : "JENIFER",
"prefix" : "Mr.",
"fst_name" : "Nacho",
"snd_name" : "Vidal",
"type" : 3,
"slug" : "",
"entity" : "employee"
},
{
"name" : "Desc5",
"type" : 4,
"slug" : "",
"entity" : "description"
}, ],
"links" : [ {
"source" : 0,
"target" : 4,
"value" : 1,
"distance" : 5
}, {
"source" : 0,
"target" : 5,
"value" : 1,
"distance" : 5
}, {
"source" : 0,
"target" : 6,
"value" : 1,
"distance" : 5
},
{
"source" : 1,
"target" : 4,
"value" : 1,
"distance" : 5
}, {
"source" : 2,
"target" : 5,
"value" : 1,
"distance" : 5
}, {
"source" : 3,
"target" : 6,
"value" : 1,
"distance" : 5
},
{
"source" : 7,
"target" : 3,
"value" : 10,
"distance" : 6
}, {
"source" : 8,
"target" : 3,
"value" : 10,
"distance" : 6
}, {
"source" : 9,
"target" : 1,
"value" : 10,
"distance" : 6
}, {
"source" : 10,
"target" : 1,
"value" : 10,
"distance" : 6
},
{
"source" : 11,
"target" : 12,
"value" : 10,
"distance" : 6
}, {
"source" : 12,
"target" : 2,
"value" : 10,
"distance" : 6
}, ]
};
var w = 560, h = 500, radius = d3.scale.log().domain([0,312000 ])
.range([ "10", "50" ]);
var vis = d3.select("body").append("svg:svg").attr("width", w).attr(
"height", h);
vis.append("marker")
.attr("id", "arrowhead")
.attr("refX", 6 + 3) /*must be smarter way to calculate shift*/
.attr("refY", 2)
.attr("markerWidth", 6)
.attr("markerHeight", 4)
.attr("orient", "auto")
.append("path")
.attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead
// var force = d3.layout.force().nodes(nodes).links(links).charge(-3000)
// .friction(0.6).gravity(0.6).size([ width, height ]).start();
//d3.json(data, function(json) {
var force = self.force = d3.layout.force().nodes(data.nodes).links(
data.links).linkDistance(function(d) {
return (d.distance * 10);
})
//.friction(0.5)
.charge(-250).size([ w, h ]).start();
var link = vis.selectAll("line.link").data(data.links).enter().append(
"svg:line").attr("class", function(d) {
return "link" + d.value + "";
}).attr("x1", function(d) {
return d.source.x;
}).attr("y1", function(d) {
return d.source.y;
}).attr("x2", function(d) {
return d.target.x;
}).attr("y2", function(d) {
return d.target.y;
}).attr("marker-end", function(d) {
if (d.value == 1) {
return "url(#arrowhead)"
} else {
return " "
}
;
});
function openLink() {
return function(d) {
var url = "";
if (d.slug != "") {
url = d.slug
} else if(d.type == 2) {
url = "clients/" + d.slug
} else if(d.type == 3) {
url = "agencies/" + d.slug
}
window.open("//" + url)
}
}
var node = vis.selectAll("g.node").data(data.nodes).enter().append(
"svg:g").attr("class", "node").call(force.drag);
node.append("circle").attr("class", function(d) {
return "node type" + d.type
}).attr("r", function(d) {
if (d.entity == "description") {
return 6
} else {
return 18
}
})
node.append("text").attr("class", function(d) {
return "nodetext title_" + d.name
}).attr("dx", 0).attr("dy", ".35em").style("font-size", "10px").attr(
"text-anchor", "middle").style("fill", "white").text(
function(d) {
if (d.entity != "description") {
return d.name
}
});
node.on("mouseover", function(d) {
if (d.entity == "company") {
d3.select(this).select('text').transition().duration(300).text(
function(d) {
return d.full_name;
}).style("font-size", "15px")
} else if (d.entity == "employee") {
var asdf = d3.select(this);
asdf.select('text').remove();
asdf.append("text").text(function(d) {
return d.prefix + ' ' + d.fst_name
}).attr("class", "nodetext").attr("dx", 0).attr("dy", ".35em")
.style("font-size", "5px")
.attr("text-anchor", "middle").style("fill", "white")
.transition().duration(300).style("font-size", "12px");
asdf.append("text").text(function(d) {
return d.snd_name
}).attr("class", "nodetext").attr("transform",
"translate(0, 12)").attr("dx", 0).attr("dy", ".35em")
.style("font-size", "5px")
.attr("text-anchor", "middle").style("fill", "white")
.transition().duration(300).style("font-size", "12px");
} else {
d3.select(this).select('text').transition().duration(300)
.style("font-size", "15px")
}
if (d.entity == "company") {
d3.select(this).select('image').attr("width", "90px").attr("x",
"-46px").attr("y", "-36.5px").attr("xlink:href",
function(d) {
return d.img_hrefL
});
}
if (d.entity == "company") {
d3.select(this).select('circle').transition().duration(300)
.attr("r", 28)
} else if (d.entity == "employee") {
d3.select(this).select('circle').transition().duration(300)
.attr("r", 32)
}
});
node.on("mouseout", function(d) {
if (d.entity == "company") {
d3.select(this).select('text').transition().duration(300).text(
function(d) {
return d.name;
}).style("font-size", "10px")
} else if (d.entity == "employee") {
///////////////////////////
// CHANGE
///////////////////////////
d3.select(this).selectAll('text').remove();
//d3.select(this).select('text')
d3.select(this).append('text').text(function(d) {
return d.name;
}).style("font-size", "14px").attr("dx", 0).attr("dy", ".35em")
.attr("text-anchor", "middle").style("fill", "white")
.attr("class", "nodetext").transition().duration(300)
.style("font-size", "10px")
} else {
d3.select(this).select('text').transition().duration(300)
.style("font-size", "10px")
}
if (d.entity == "company") {
d3.select(this).select('image').attr("width", "70px").attr("x",
"-36px").attr("y", "-36px").attr("xlink:href",
function(d) {
return d.img_hrefD
});
}
if (d.entity == "company" || d.entity == "employee") {
d3.select(this).select('circle').transition().duration(300)
.attr("r", 18)
}
});
node.on("mouseover", fade(.4, "red")).on("mouseout", fade(1));
var linkedByIndex = {};
data.links.forEach(function(d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
function isConnected(a, b) {
return linkedByIndex[a.index + "," + b.index]
|| linkedByIndex[b.index + "," + a.index]
|| a.index == b.index;
}
force.on("tick", function() {
link.attr("x1", function(d) {
return d.source.x;
}).attr("y1", function(d) {
return d.source.y;
}).attr("x2", function(d) {
return d.target.x;
}).attr("y2", function(d) {
return d.target.y;
});
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
function fade(opacity, color) {
return function(d) {
node.style("stroke-opacity", function(o) {
thisOpacity = isConnected(d, o) ? 1 : opacity;
this.setAttribute('fill-opacity', thisOpacity);
return thisOpacity;
});
link.style("stroke-opacity", function(o) {
return o.source === d || o.target === d ? 1 : opacity;
})
.style("stroke", function(o) {
return o.source === d || o.target === d ? color : "#000";
});
};
}
//});
</script>
</body>
</html>
i want a direction of the arrows of incoming and that of outgoing
