Linking Nodes Of Variable Radius With Arrows

I have some circles/nodes of different radius and I have to connect them with paths having arrow ends. Here's the code for the marker: svg.append('svg:defs').selectAll('marker')

Solution 1:

This is an old question, but here is my solution if you want your arrowheads to be at the edge of your nodes instead of on top of or beneath them. My approach was also to draw the path connecting the nodes such that the end points were on the nodes' edges rather than at the nodes' centers. Starting from the Mobile Patent Suits example (http://bl.ocks.org/mbostock/1153292), I replaced the linkArc method with:

functionlinkArc(d) {
    var sourceX = d.source.x;
    var sourceY = d.source.y;
    var targetX = d.target.x;
    var targetY = d.target.y;

    var theta = Math.atan((targetX - sourceX) / (targetY - sourceY));
    var phi = Math.atan((targetY - sourceY) / (targetX - sourceX));

    var sinTheta = d.source.r * Math.sin(theta);
    var cosTheta = d.source.r * Math.cos(theta);
    var sinPhi = d.target.r * Math.sin(phi);
    var cosPhi = d.target.r * Math.cos(phi);

    // Set the position of the link's end point at the source node// such that it is on the edge closest to the target nodeif (d.target.y > d.source.y) {
        sourceX = sourceX + sinTheta;
        sourceY = sourceY + cosTheta;
    }
    else {
        sourceX = sourceX - sinTheta;
        sourceY = sourceY - cosTheta;
    }

    // Set the position of the link's end point at the target node// such that it is on the edge closest to the source nodeif (d.source.x > d.target.x) {
        targetX = targetX + cosPhi;
        targetY = targetY + sinPhi;    
    }
    else {
        targetX = targetX - cosPhi;
        targetY = targetY - sinPhi;   
    }

    // Draw an arc between the two calculated pointsvar dx = targetX - sourceX,
        dy = targetY - sourceY,
        dr = Math.sqrt(dx * dx + dy * dy);
    return"M" + sourceX + "," + sourceY + "A" + dr + "," + dr + " 0 0,1 " + targetX + "," + targetY;
}

Note that this code expects an "r," or radius, attribute to be in the node data. To place the points of the arrows at the correct positions, I changed the refX and refY attributes so that the point of the arrow was at the edge of the node:

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", 10)
    .attr("refY", 0)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("path")
    .attr("d", "M0,-5L10,0L0,5");

Solution 2:

This is really funny; I just solved this problem yesterday.

What I did is to end the path at the edge of the node, not at the centre. My case is more complicated because I use Bezier curves, not straight lines, but this might help you:

svg.append("svg:defs").selectAll("marker")
    .data(["default"])
  .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -3 6 6")
    .attr("refX", 5.0)
    .attr("refY", 0.0)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-2.0L5,0L0,2.0"); 


    links
      .attr("fill", "none")
      .attr("d", function(d) {
        vartightness= -3.0;
        if(d.type == "straight")
            tightness = 1000;

        // Places the control point for the Bezier on the bisection of the// segment between the source and target points, at a distance// equal to half the distance between the points.vardx= d.target.x - d.source.x;
        vardy= d.target.y - d.source.y;
        vardr= Math.sqrt(dx * dx + dy * dy);
        varqx= d.source.x + dx/2.0 - dy/tightness;
        varqy= d.source.y + dy/2.0 + dx/tightness;

        // Calculates the segment from the control point Q to the target// to use it as a direction to wich it will move "node_size" back// from the end point, to finish the edge aprox at the edge of the// node. Note there will be an angular error due to the segment not// having the same direction as the curve at that point.vardqx= d.target.x - qx;
        vardqy= d.target.y - qy;
        varqr= Math.sqrt(dqx * dqx + dqy * dqy);

        varoffset=1.1 * node_size(d.target);
        vartx= d.target.x - dqx/qr* offset;
        varty= d.target.y - dqy/qr* offset;

        return"M" + d.source.x + "," + d.source.y + "Q"+ qx + "," + qy 
                + " " + tx + "," + ty;  // to "node_size" pixels before//+ " " + d.target.x + "," + d.target.y; // til target
      });

By the way; you'll have to do the same for the 'source' arrow head (I only have it at the target)

Solution 3:

you may order the svg elements such that the circles will be rendered first, the lines with arrows thereafter (in d3 there is a .ordermethod, see here for details. for the record, the corrsponding part of the raphael api is discussed here).

Solution 4:

I search online, none of the answer worked, so I made my own:

Here is the code:

//arrows
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", 9)
    .attr("refY", 0)
    .attr("markerWidth", 10)
    .attr("markerHeight", 10)
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
    .style("stroke", "#4679BD")
    .style("opacity", "0.6"); 

  //Create all the line svgs but without locations yetvar link = svg.selectAll(".link")
   .data(forceData.links)
   .enter().append("line")
   .attr("class", "link")
   .style("marker-end", "url(#suit)");

//Set up the force layoutvar force = d3.layout.force()
    .nodes(forceData.nodes)
    .links(forceData.links)
    .charge(-120)
    .linkDistance(200)
    .size([width, height])
    .on("tick", tick)
    .start();

functiontick(){
    link.attr("x1", function (d) { return d.source.x; })
        .attr("y1", function (d) { return d.source.y; })
        .attr("x2", function (d) { 
            returncalculateX(d.target.x, d.target.y, d.source.x, d.source.y, d.target.radius); 
        })
        .attr("y2", function (d) { 
            returncalculateY(d.target.x, d.target.y, d.source.x, d.source.y, d.target.radius);
        });

    d3.selectAll("circle")
        .attr("cx", function (d) { return d.x; })
        .attr("cy", function (d) { return d.y; });

    d3.select("#forcelayoutGraph").selectAll("text")
        .attr("x", function (d) { return d.x; })
        .attr("y", function (d) { return d.y; });
}
functioncalculateX(tx, ty, sx, sy, radius){
    if(tx == sx) return tx;                 //if the target x == source x, no need to change the target x.var xLength = Math.abs(tx - sx);    //calculate the difference of xvar yLength = Math.abs(ty - sy);    //calculate the difference of y//calculate the ratio using the trigonometric functionvar ratio = radius / Math.sqrt(xLength * xLength + yLength * yLength);
    if(tx > sx)  return tx - xLength * ratio;    //if target x > source x return target x - radiusif(tx < sx) return  tx + xLength * ratio;    //if target x < source x return target x + radius
}
functioncalculateY(tx, ty, sx, sy, radius){
    if(ty == sy) return ty;                 //if the target y == source y, no need to change the target y.var xLength = Math.abs(tx - sx);    //calculate the difference of xvar yLength = Math.abs(ty - sy);    //calculate the difference of y//calculate the ratio using the trigonometric functionvar ratio = radius / Math.sqrt(xLength * xLength + yLength * yLength);
    if(ty > sy) return ty - yLength * ratio;   //if target y > source y return target x - radiusif(ty < sy) return ty + yLength * ratio;   //if target y > source y return target x - radius
}