Link starting from the middle of a link?

[benjaminaaron]

I would like to use your library to visualize triples in a graph database. I also want to support the new RDF-star syntax that allows to make statements about statements. So this means basically that the source (or target) of a link is a node-link-node-triple and not just a node.
I think the easiest way to visualize this, is to make a link start (or end) at the middle of another link. This would symbolize a statement about a statement.
Do you have an idea how I can make this happen with your library? I thought about putting a tiny node in the middle of a link (so it's actually modelled as node-link-node-link-node even so it looks just like node-link-node) and have that tiny node as starting point for another link. But the crucial point would be for two of the three links connecting to the tiny nodes not to move around. They would have to stay fixed relative to the tiny node to keep up the illusion that it's just one long link.

[vasturiano]

@benjaminaaron thanks for reaching out.

That's an interesting question. I think the way you're suggesting is the better approach at implementing this, to have an additional node in the graph that represents the middle of the straight-line distance between the two real nodes.

The only element that's missing as you mentioned is how to achieve having that 3rd node always in a given position relative to the other two. I would suggest adding an additional force to the system whose responsibility is to fix these nodes onto their given position.

You can look into d3-force for more details on how to implement a force plugin. It's essentially a function that runs on every engine tick and manipulates position and velocity properties of each node according to some custom logic. In this case, you'd want these nodes to know about its two siblings and adjust their position (via x and y attributes) to be precisely in the middle of the line that's the shortest distance between the two nodes.

You can also see here for an example on how to include a custom force into the system:

force-graph/example/collision-detection/index.html

Lines 35 to 45 in 450c050

	.d3Force('box', () => {
	const SQUARE_HALF_SIDE = Graph.nodeRelSize() * N * 0.5;
	nodes.forEach(node => {
	const x = node.x || 0, y = node.y || 0;
	// bounce on box walls
	if (Math.abs(x) > SQUARE_HALF_SIDE) { node.vx *= -1; }
	if (Math.abs(y) > SQUARE_HALF_SIDE) { node.vy *= -1; }
	});
	})

[benjaminaaron]

Thanks, I'll try this!