D3 force directed layout: bounding box - javascript

A very similar question has been asked here: D3 force directed layout with bounding box ... I tried implementing the suggested solutions but without success, so I'll ask again :(
This is my code
// initialization stuff happening up here...
// create graph:
this.onStateChange = function() {
svg.selectAll("g").remove();
nodes = {};
links = [];
links = eval(this.getState().string);
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});
});
force.nodes(d3.values(nodes)).links(links).start();
path = svg.append("g").selectAll("path")
.data(force.links()).enter()
.append("path")
.attr("class", function(d) {return "link " + d.type;})
.attr("marker-end", function(d) {return "url(#" + d.type + ")";});
circle = svg.append("g").selectAll("circle")
.data(force.nodes())
.enter()
.append("circle")
.attr("r", 8)
.call(force.drag);
text = svg.append("g").selectAll("text")
.data(force.nodes())
.enter()
.append("text")
.style("font-size","15px")
.attr("x", 10)
.attr("y", ".42em").text(function(d) {return d.name;});
};
//add gravity
function tick() {
path.attr("d", linkArc);
circle.attr("transform", transform);
text.attr("transform", transform);
circle.attr("cx", function(d) { return d.x = Math.max(r, Math.min(w - r, d.x)); })
.attr("cy", function(d) { return d.y = Math.max(r, Math.min(h - r, d.y)); });
path.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; });
}
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;
}
function transform(d) {
return "translate(" + d.x + "," + d.y + ")";
}
};
However this doesnt work - I cannot move the nodes anymore and they are stuck in the upper right corner.

I found out how it goes. If anybody wants to add a bounding box to this mobile-patent-suits example (http://bl.ocks.org/mbostock/1153292), this might be helpful:
function tick() {
//circle.attr("transform", transform); //no need for this anymore
circle.attr("cx", function(d) { return d.x = Math.max(8, Math.min(300 - 8, d.x)); })
.attr("cy", function(d) { return d.y = Math.max(8, Math.min(280 - 8, d.y)); });
text.attr("transform", transform);
path.attr("d", linkArc);
}
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;
}
//function transform(d) { //don't need this anymore either
//return "translate(" + d.x + "," + d.y + ")";
//}
};

Related

How to show the text of D3 node on hover?

I am very new to D3 and I am trying to replicate the behavior for text like is done with the circle elements here with the mouseover,mouseout behavior. Basically, to show text when hovered and hidden when not. Do I need to create a node var as I have with circle and text or is it possible with the current implementation:
var nodes = {};
// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source, value: link.type});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, value: link.type});
});
var width = 1000,
height = 900;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(90)
.charge(-125)
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// Per-type markers, as they don't inherit styles.
svg.append("defs").selectAll("marker")
.data(["suit", "licensing", "resolved"])
.enter().append("marker")
.attr("id", function(d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5");
var path = svg.append("g").selectAll("path")
.data(force.links())
.enter().append("path")
.attr("class", function(d) { return "link " + d.type; })
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; })
.style("stroke", function(d){
if (d.type >= 0.4) {
return '#000066'
}
if (d.type >= 0.25) {
return '#ccccff'
}
if (d.type >= 0.01) {
return 'e8f4f8'
}
else {
return '#FFFFFF'
}
});
var circle = svg.append("g").selectAll("circle")
.data(force.nodes())
.enter().append("circle")
.attr("r", 6)
.on("dblclick", dblclick)
.on('mouseover', function(d){
var nodeSelection = d3.select(this).style({opacity:'0.5'});
nodeSelection.select("text").style({opacity:'1.0'});
})
.on('mouseout', function(d){
var nodeSelection = d3.select(this).style({opacity:'0.0'});
nodeSelection.select("text").style({opacity:'0.0'});
})
.call(force.drag);
var text = svg.append("g").selectAll("text")
.data(force.nodes())
.enter().append("text")
.attr("x", 8)
.attr("y", ".31em")
.text(function(d){
if (d.value >= 0.35){
return d.name
}
});
// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
path.attr("d", linkArc);
circle.attr("transform", transform);
text.attr("transform", transform);
}
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;
}
function transform(d) {
return "translate(" + d.x + "," + d.y + ")";
}
var drag = force.drag()
.on("dragstart", dragstart);
function dblclick(d) {
d3.select(this).classed("fixed", d.fixed = false);
}
function dragstart(d) {
d3.select(this).classed("fixed", d.fixed = true);
}
Add opacity attribute to your text that defaults to 0. It appears you already have text to show and hide it on mouseover/mouseout. I posted a different way to do it as well if your method is not working for you.
var text = svg.append("g").selectAll("text")
.data(force.nodes())
.enter().append("text")
.attr("x", 8)
.attr("y", ".31em")
.attr("opacity", 1)
.text(function(d){
if (d.value >= 0.35){
return d.name
}
});
function mouseout(d) { text.style("opacity", 0); }
function mouseover(d) { text.style("opacity", 1);

d3 Network with Multiple Links in the Same Direction

I am attempting to alter the Mobile Patent Suits example to allow for multiple links in one direction.
I have data (yes, I know Jim isn't actually Pam's boss):
source target relationship
Michael Scott Jan Levenson pro
Jan Levenson Michael Scott personal
Jim Halpert Pam Beasley pro
Jim Halpert Pam Beasley personal
The multi-path functionality of the Mobil Patents Suit example allows the first two rows to be presented correctly (two arcs). However, only one blended arc is presented for the last two rows.
Question: How do I allow links with the same directionality to be shown as multiple arcs rather than a single arc?
Here is my arc code (ripped straight from the Mobile Patents Example):
function tick() {
path.attr("d", linkArc);
circle.attr("transform", transform);
text.attr("transform", transform);
}
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;
}
function transform(d) {
return "translate(" + d.x + "," + d.y + ")";
}
Any help at all would be greatly appreciated. Thank you!
There are probable a few potential approaches for this, one comes to mind rather quickly: use a different path generator for each type relationship between the nodes. You'll have to have a property indicating the nature of the relationship (which you have in your question), and use that to set the path alignment.
In the snippet below I check to see what relationship is being drawn, and reduce the radius of the arc in a personal relationship by 50% as compared to the professional relationship arc radius. The relevant part is:
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);
if(d.relationship == "pro") {
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}
else {
return "M" + d.source.x + "," + d.source.y + "A" + (dr * 0.3) + "," + (dr * 0.3) + " 0 0,1 " + d.target.x + "," + d.target.y;
}
}
Here's the whole thing in practice:
var links = [
{ source: "Michael Scott",
target:"Jan Levenson",
relationship: "pro"
},
{ source:"Jan Levenson",
target:"Michael Scott",
relationship: "Personal"
},
{ source: "Jim Halpert",
target: "Pam Beasley",
relationship: "pro"
},
{
source: "Jim Halpert",
target: "Pam Beasley",
relationship: "Personal"
}
]
var nodes = {};
// Compute the distinct nodes from the links.
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 = 960,
height = 500;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(60)
.charge(-300)
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// Per-type markers, as they don't inherit styles.
svg.append("defs").selectAll("marker")
.data(["suit", "licensing", "resolved"])
.enter().append("marker")
.attr("id", function(d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5");
var path = svg.append("g").selectAll("path")
.data(force.links())
.enter().append("path")
.attr("class", function(d) { return "link " + d.type; })
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
var circle = svg.append("g").selectAll("circle")
.data(force.nodes())
.enter().append("circle")
.attr("r", 6)
.call(force.drag);
var text = svg.append("g").selectAll("text")
.data(force.nodes())
.enter().append("text")
.attr("x", 8)
.attr("y", ".31em")
.text(function(d) { return d.name; });
// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
path.attr("d", linkArc);
circle.attr("transform", transform);
text.attr("transform", transform);
}
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);
if(d.relationship == "pro") {
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}
else {
return "M" + d.source.x + "," + d.source.y + "A" + (dr * 0.3) + "," + (dr * 0.3) + " 0 0,1 " + d.target.x + "," + d.target.y;
}
}
function transform(d) {
return "translate(" + d.x + "," + d.y + ")";
}
.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: 10px sans-serif;
pointer-events: none;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Define JSON Data Attributes to use in Tooltip (Tooltip Shows "Undefined")

I have looked at the other SO questions related to this issue, implemented the solutions, and have yet to have success.
I have a d3 force directed diagram driven by an external JSON file that has five attributes: source, target, source_title, target_title, and value.
Sample of JSON:
[{"source":"Michael Scott", "source_title":"boss", "target":"Jim Halpert", "target_title":"salesman", "value":"1"},
{"source":"Pam Beasley", "source_title":"receptionist", "target":"Jim Halpert", "target_title":"salesman", "value":"1"},
{"source":"Pam Beasley", "source_title":"receptionist", "target":"Angela", "target_title":"accountant", "value":"1"}]
Current Script:
<script>
d3.json("IA_Data.json", function(error, data){
data.forEach(function(d) {
d.source_title = d.source_title;
});
var links = data;
var nodes = {};
// Compute the distinct nodes from the links.
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 = 2000,
height = 1000;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(5)
.charge(-400)
.gravity(.2)
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var path = svg.append("g").selectAll("path")
.data(force.links())
.enter().append("path")
.attr("class", function(d) { return "link " + d.type; })
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {return d.source_title;});
svg.call(tip);
var circle = svg.append("g").selectAll("circle")
.data(force.nodes())
.enter().append("circle")
.attr("r", 6)
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
path.attr("d", linkArc);
circle.attr("transform", transform);
}
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;
}
function transform(d) {
return "translate(" + d.x + "," + d.y + ")";
}
});
</script>
As you can see, I am trying to return value in the .html line of d3.tip. My latest attempt at initializing value is in this section:
data.forEach(function(d) {
d.source_title = +d.source_title;
});
This resulting tooltips show "undefined", implying the source_title is not defined properly. If I swap source_title for name in d3.tip, the source/target text shows in the tooltip. How should I define the 'source_title' attribute properly?
Any insight would be greatly appreciated - thank you!
There is no source_title in your nodes array.
The solution is simple: create that key/value pair when you populate the nodes array:
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {
name: link.source,
source_title: link.source_title//creating 'source_title' here
});
});
Here is a demo with your code (note: only two circles have title here):
var data = [{
"source": "Michael Scott",
"source_title": "boss",
"target": "Jim Halpert",
"target_title": "salesman",
"value": "1"
}, {
"source": "Pam Beasley",
"source_title": "receptionist",
"target": "Jim Halpert",
"target_title": "salesman",
"value": "1"
}, {
"source": "Pam Beasley",
"source_title": "receptionist",
"target": "Angela",
"target_title": "accountant",
"value": "1"
}];
data.forEach(function(d) {
d.source_title = d.source_title;
});
var links = data;
var nodes = {};
// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {
name: link.source,
source_title: link.source_title
});
link.target = nodes[link.target] || (nodes[link.target] = {
name: link.target,
target_title: link.target_title
});
});
var width = 300,
height = 150;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(5)
.charge(-400)
.gravity(.2)
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var path = svg.append("g").selectAll("ceciliaPayne")
.data(force.links())
.enter().append("path")
.attr("class", function(d) {
return "link " + d.type;
})
.attr("marker-end", function(d) {
return "url(#" + d.type + ")";
});
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return d.source_title;
});
svg.call(tip);
var circle = svg.append("g").selectAll("circle")
.data(force.nodes())
.enter().append("circle")
.attr("r", 6)
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
path.attr("d", linkArc);
circle.attr("transform", transform);
}
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;
}
function transform(d) {
return "translate(" + d.x + "," + d.y + ")";
}
path {
fill: none;
stroke: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>

Abnormal width when I have two graph D3.js on the same page

I have a problem when there is two graph on same page, the first graph has a normal size but the second which is populated by fixed data is anormaly large. The two graph are superimposed. Strange thing, if I use the code of the second graph, it works on my local website test.
This is the code of the second graph :
// http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/
var links = [
{"source":"TEST111","target":"TEST222","level":"1","life":"1","test":"1","type":"licensing"},
{"source":"TEST222","target":"TEST3333","level":"2","life":"2","test":"2","type":"licensing"},
{"source":"TEST3333","target":"TEST4444","level":"3","life":"3","test":"3","type":"licensing"}
];
var nodes = {};
// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source, level:link.level, life:link.life});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, level:link.level, life:link.life});
});
var width = 960,
height = 500;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(200)
.charge(-400)
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// Per-type markers, as they don't inherit styles.
svg.append("defs").selectAll("marker")
.data(["suit", "licensing", "resolved"])
.enter().append("marker")
.attr("id", function(d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 20)
.attr("markerHeight", 20)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5");
var path = svg.append("g").selectAll("path")
.data(force.links())
.enter().append("path")
.attr("class", function(d) { return "link " + d.type; })
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
var circle = svg.append("g").selectAll("circle")
.data(force.nodes())
.enter().append("circle")
.attr("r", 20)
.call(force.drag)
.style("fill","red")
.on("click", click);
function click(d){
}
var text = svg.append("g").selectAll("text")
.data(force.nodes())
.enter().append("text")
.attr("x", 8)
.attr("y", ".31em")
.text(function(d) { return d.name; });
// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
path.attr("d", linkArc);
circle.attr("transform", transform);
text.attr("transform", transform)
}
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;
}
function transform(d) {
return "translate(" + d.x + "," + d.y + ")";
}
Also, on the Pluker, the two graph are bunk but it's not the problem (It works in local). You can delete the data load if you want (line 34). This is an online Plunker to see the problem : https://plnkr.co/edit/ewoi6wao97tXAKr1QxIm?p=preview
Thanks.
Basically your problem was you were filling the path rather than just giving it a stroke.
So when you create the path just add the following :
.style("fill","none").style("stroke","red")
So now it looks like :
var path = svg.append("g").selectAll("path")
.data(force.links())
.enter().append("path")
.attr("class", function(d) { return "link " + d.type; })
.style("fill","none").style("stroke","red")
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
Updated plnkr : https://plnkr.co/edit/JgHwC4zyolj0hsg8ib4w?p=preview

Need some help on D3 pie layout adding line to label

Here is the image sample how I want to look alike:
http://i.stack.imgur.com/ro2kQ.png
I was making a pie chart but I want to add a line to that label-> value.
Any help would be appreciated.
http://jsfiddle.net/28zv8n65/
Here is ;
arcs.append("svg:text")
.attr("transform", function(d) { //set the label's origin to the center of the arc
//we have to make sure to set these before calling arc.centroid
d.outerRadius = outerRadius + 50; // Set Outer Coordinate
d.innerRadius = outerRadius + 45; // Set Inner Coordinate
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle") //center the text on it's origin
.style("fill", "Purple")
.style("font", "bold 12px Arial")
.text(function(d, i) { return dataSet[i].label; });
Try this code.
var labelr = outerRadius+60;
//Draw labels
arcs.append("svg:text")
.attr("text-anchor", "middle") //center the text on it's origin
.style("fill", "Purple")
.style("font", "bold 12px Arial")
.text(function(d, i) { return dataSet[i].label; })
.attr("x", function(d) {
var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
d.cx = Math.cos(a) * (labelr - 75);
return d.x = Math.cos(a) * (labelr - 20);
})
.attr("y", function(d) {
var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
d.cy = Math.sin(a) * (labelr - 75);
return d.y = Math.sin(a) * (labelr - 20);
})
.each(function(d) {
var bbox = this.getBBox();
d.sx = d.x - bbox.width/2 - 2;
d.ox = d.x + bbox.width/2 + 2;
d.sy = d.oy = d.y + 5;
});
//Draw pointer lines
arcs
.append("path")
.attr("class", "pointer")
.style("fill", "none")
.style("stroke", "black")
.attr("d", function(d) {
if(d.cx > d.ox) {
return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy;
} else {
return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy;
}
});
Code refered from d3.js pie chart with angled/horizontal labels

Categories

Resources