D3 JS - How to draw horizontal force graph - javascript

I am trying to create a force graph as shown in below image. I am checking the graph given at this link force tree. This tree is vertical. I want it horizontal so that I can achieve the graph shown in the image. I tried to play with the code but was not able to make it horizontal. Is there any way I can achieve the graph shown in the image.
desired force graph

Turning the tree horizontal is actually quite simple in the given example.
The tick function is responsible for assigning positions to each node, and it modifies the y value of the nodes between levels. Simply change it to modify the x value of the nodes.
Like so:
function tick(e) {
var k = 6 * e.alpha;
// Push sources up and targets down to form a weak tree.
link
// Swapped here from y to x
.each(function(d) { d.source.x -= k, d.target.x += k; })
.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("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}

Related

In a d3 force simulation, is there a way to force away from certain fixed points?

I want nodes to repel away from the edges of the svg. I've been fiddling with the strength of the links and the forceManyBody() strength, but any time I interact with a node with lots of links, it sends smaller node clusters off the screen. I want the nodes to separate evenly without being blasted off like a rocketship.
Here's what it looks like when I run the simulation without interacting with it:
And this is on a large svg (2400,1600) that will probably get reduced to half the size.
I'm thinking if I force away from the corners and the midpoint between each corner, they'll still separate, but won't get launched off the screen.
Here's the current force simulation code:
var force = d3
.forceSimulation(data.nodes)
.force(
"link",
d3
.forceLink()
.id(function (d) {
return d.name;
})
.strength(0.4)
.links(data.links)
)
.force("charge", d3.forceManyBody().strength(-20))
.force("center", d3.forceCenter(1200, 800))
.force(
"collision",
d3.forceCollide().radius((node) => {
return node.type === "application" ? 50 : 30;
})
)
.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 + ")";
});
});
So, is there a way to force nodes away from the edges, or a better way to achieve separation without losing nodes?

Making d3 v4 group react to simulation

jsfiddle https://jsfiddle.net/z7ju3z1q/3/
The problem is, I can't make titles stick with groups with working simulation.
Changing line 76 from simulation.nodes(nodes); to simulation.nodes(node); breaks simulation (apparently), but makes title stick to circles. As I understand, the problem is that dragging working with circles but not with groups, for some reason. And that's is the problem Iwe been facing whole day.
I tried describing title like this (line 38)
var title = g.selectAll("text");
And then adding it to tick (line 84)
function ticked() {
title.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
}
As I understand, the problem is that dragging working with circles but not with groups, for some reason
You are manipulating the nodes on drag with cx and cy properties. g elements do not have these, so this will not achieve what you want, even if node contained groups rather than circles:
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
As noted,node = g.append("circle") means that you aren't actually manipulating the g elements anyways, which is why your circles move on tick or drag.
Instead, keep node a selection of g elements, and manipulate the transform property:
// the group representing each node:
node = node.enter().append("g").merge(node);
// the circle for each group
node.append("circle")
.classed('node', true).attr('id', id)
.text(id)
.attr("r", 25).attr("fill", function(d) { return color(d.id); });
// the text for each group
node.append("text")
.classed('text', true)
.attr("text-anchor", "start")
.attr("dx", 6).text(id).merge(node);
Then, on click or drag events, just update the transform:
Tick:
node.attr("transform",function(d) { return "translate("+d.x+","+d.y+")" ;});
Drag:
d.x = d3.event.x;
d.y = d3.event.y;
d3.select(this).attr("transform",function(d) { return "translate("+d.x+","+d.y+")" ;});
Here's an updated fiddle.

Old scaled data fail to disappear after axis rescale

Using D3 ver 3.5.5. I am using an example (https://gist.github.com/stepheneb/1182434) as a template: the example code to draw the data looks like this:
var circle = this.vis.select("svg").selectAll("circle")
.data(this.points, function(d) { return d; });
circle.enter().append("circle")
.attr("class", function(d) { return d === self.selected ? "selected" : null; })
.attr("cx", function(d) { return self.x(d.x); })
.attr("cy", function(d) { return self.y(d.y); })
.attr("r", 10.0)
.style("cursor", "ns-resize")
.on("mousedown.drag", self.datapoint_drag())
.on("touchstart.drag", self.datapoint_drag());
circle
.attr("class", function(d) { return d === self.selected ? "selected" : null; })
.attr("cx", function(d) {
return self.x(d.x); })
.attr("cy", function(d) { return self.y(d.y); });
circle.exit().remove();
I think of this as four sections: the first does selectAll("circles") and adds the data. The second tells where the data points are ("cx", "cy") and other attr(), and the third is a bit of mystery to me, because it appears to also set "cx" and "cy", but no other attributes. Finally, we do and exit().remove(), which the documentation says removes any data elements not associated with the data array. I dont see how this is happening in this example. When I set breakpoints into the code, both the "cx" steps get called for each data point in the this.points array.
In my code, I try to do the same steps:
hr_circles = self.graph_gps.svg.selectAll("hr_circles")
.data(self.graph_gps.datay1); // , function(d){return d;}
hr_circles.enter().append("circle")
.style("z-index", 3)
.attr("class", "y1")
.attr("r", 1)
.attr("cx", function (d, i) {
return xScale(d.time)
})
.attr("cy", function (d, i) {
return yScale(d.vy)
})
.on("mouseover",
function (d) {...displays a tooltip...})
.on("mouseout", function (d) {
});
hr_circles.attr("class", "y1")
.attr("cx", function (d, i) {
return xScale(d.time)
})
.attr("cy", function (d, i) {
return yScale(d.vy)
})
hr_circles.exit().remove();
When my graph initially displays, the data appear just fine, properly scaled, etc. When I try to re-scale by dragging on the x-axis (as in the example), the axis rescales itself just fine, and re-scaled data appears on the graph, but the original data is also still there (no longer scaled correctly), making a big mess! How do you erase or make the originally scaled data go away?
Tried to post images, but I guess my reputation is too low. Will send to anyone interested.

Weird behaviour of Fisheye Distortion plugin

Hi I would like to use Fisheye Distortion plugin for my force-directed graph in d3.js, but when I want to apply this plugin, behaviour of graph is weird. I am new in d3.js and not good at computer graphics.
complete sample in jsfiddle
var fisheye = d3.fisheye.circular()
.radius(200)
.distortion(2);
// graph - variable which represents whole graph
graph.svg.on("mousemove", function() {
fisheye.focus(d3.mouse(this));
d3.select("svg").selectAll("circle").each(function(d) { d.fisheye = fisheye(d); })
.attr("cx", function(d) { return d.fisheye.x; })
.attr("cy", function(d) { return d.fisheye.y; })
.attr("r", function(d) { return d.fisheye.z * 4.5; });
d3.select("svg").selectAll("line").attr("x1", function(d) { return d.source.fisheye.x; })
.attr("y1", function(d) { return d.source.fisheye.y; })
.attr("x2", function(d) { return d.target.fisheye.x; })
.attr("y2", function(d) { return d.target.fisheye.y; });
});
Weird behaviour I mean the nodes of graph disappear (are hidden) after mouseover action.
The problem is that you were using the code to add cx and cy to circles, but your circles were actually enclosed inside nodeElements which were transformed into place.
Hence, changing the fisheye code to the following solves the problem:
graph.svg.on("mousemove", function() {
fisheye.focus(d3.mouse(this));
// Change transform on the .node
d3.select("svg").selectAll(".node")
.each(function(d) { d.fisheye = fisheye({ x: graph.x(d.x), y: graph.y(d.y) }); console.log(d.fisheye, d); })
.attr("transform", function (d) { return "translate(" + d.fisheye.x + "," + d.fisheye.y + ")"; })
// Now change the 'r'adius on the circles within
// One can also scale the font of the text inside nodeElements here
.select("circle")
.attr("r", function(d) { return 15 * graph.nodeSizeFactor * d.fisheye.z; });
d3.select("svg").selectAll("line")
.attr("x1", function(d) { return d.source.fisheye.x; })
.attr("y1", function(d) { return d.source.fisheye.y; })
.attr("x2", function(d) { return d.target.fisheye.x; })
.attr("y2", function(d) { return d.target.fisheye.y; });
});
Note that I have also applied the proper scales graph.x and graph.y for the transform attribute and 15 * graph.nodeSizeFactor for the radius of the circles (instead of 4.5).
Working Demo: http://jsfiddle.net/90u4sjzm/23/

How to draw a simple Force-directed graph in D3 Javascript

I am following this tutorial: > http://bl.ocks.org/mbostock/4062045 for visualising a Force Directed Graph in D3 Javascript. The link above has the code and JSON file as well. I have two questions. How are the nodes linked? Here is the code for the links and nodes and their positions:
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("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
My second question: Could anyone please help me draw a sample of two nodes (circles) and one link between these two nodes so I can understand how this graph works. Your assistance would be very much appreciated.
Whether two nodes are linked or not is determined by the data. In particular, it contains lines such as
{"source":1,"target":0,"value":1}
which tell it which nodes (by index) to link. The indices refer to the list of nodes also given in the data. This data is given to D3 in this block:
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
So for each element in graph.links, a line will be added. At this point, the line doesn't have a start or end point, so it is not drawn -- only the element is added. Then, while the simulation is running, the start and end points of the lines are set based on the current state of the simulation. This is the code that you have in your question.
The following code would draw two circles and a link between them.
var svg = d3.select("body").append("svg").attr("width", 100).attr("height", 100);
svg.append("circle").attr("cx", 10).attr("cy", 10);
svg.append("circle").attr("cx", 90).attr("cy", 90);
svg.append("line").attr("x1", 10).attr("y1", 10).attr("x2", 90).attr("y2", 90);

Categories