1

I want to have many node shapes (circle, square...) Here is my JSfiddle prototype the problem is arrow placings: enter image description here

They are created like this in js:

   svg.append('svg:defs').append('svg:marker')
     .attr('id', 'end-arrow')
     .attr('viewBox', '0 -5 10 10')
     .attr('refX', 6)
     .attr('markerWidth', 3)
     .attr('markerHeight', 3)
     .attr('orient', 'auto')
     .append('svg:path')
     .attr('d', 'M0,-5L10,0L0,5')
     .attr('fill', 'red');
//...
   var link = svg.selectAll(".link")
     .data(graph.links)
     .enter().append("line")
     .attr("class", "link");

and css:

.link {
  stroke: #7a4e4e;
  stroke-width: 3px;
  stroke-opacity: 1;
  marker-end: url(#end-arrow);
}

Arrows shall be where I drew green marks, yet they are in the centre (red marks). They are oriented correctly, yet misplaced. How to make arrows be on the intersection of link-edge and node in d3js?

DuckQueen
  • 772
  • 10
  • 62
  • 134

1 Answers1

1

You can use the function

route = cola.makeEdgeBetween(source: Rectangle, target: Rectangle, ah: number)

where your source and target are the bounds of the nodes and ah is some offset for the size of the arrow. this will give you 3 coordinates

 * @return An object with three point properties, the intersection with the
 *         source rectangle (sourceIntersection), the intersection with then
 *         target rectangle (targetIntersection), and the point an arrow
 *         head of the specified size would need to start (arrowStart).

and you can subsequently draw a line with the sourceIntersection and arrowStart coordinates

however this nodes are all considered rectangular in webcola, so for your circular nodes they will be stopping at the edge of the rectangle that bounds that circle, if you dont want that you would have to compensate for it by increasing the length of the line by calculating that distance

theya
  • 33
  • 2
  • 8