0

In my code I am tryng to link few svg rect elements with arrow (svg markers) based on the conditions in my d3 application. The rects are creating without any issues but no arrow is generating. But similar approach is working in my other examples. Here is my code:

  var rect = canvas.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
    .filter(condition) 
    .attr("class", function(d) { return d.children ? "parent" : "child"; })
    .attr("x", function(d) { return d.x + 20 ; })
    .attr("y", function(d) { return d.y + 30 ; })
    .attr("width", 30)
    .attr("height", 30)
    .attr("opacity", 0.25);

Code for arrow and the line:

    //Create definition for arrowhead:
     rect.append("defs").append("marker")
    .attr("id", "arrowhead")
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 0)
    .attr("refY", 0)
    .attr("markerUnits", "strokeWidth")
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M0,-5L10,0L0,5");
     ....
     // Connecting the arrow and the line (not working)
     rect.selectAll("rect").append("line")
    .filter(condition)
    .attr("x1", function(d) { getting x1 values })
    .attr("y1", function(d) {getting y1 values })
    .attr("x2", function(d) {getting x2 values)
    .attr("y2", function(d) {getting y2 values)
    .attr("stroke", "black")
    .attr("stroke-width", 1.5)
    .attr("marker-end", "url(#arrowhead)")
    .attr("fill", "none");

Any idea how it will generate all the arrows..

5
  • The defs element needs to be appended to the SVG, not the rect elements. Nov 25, 2014 at 14:57
  • I also did the change but now only one arrow is displaying not all of them. Now When I am checking my filter as console output it shows the correct filters...
    – Kal
    Nov 25, 2014 at 15:39
  • This is my code and when I am calling it from the code it gives me the last value (does it the reason for this issue).. The code is to get the coordinates of the rect: var getSize; var rectPos = document.getElementsByTagName("rect"); for(i=0; i<rectPos.length; i++){ getSize = rectPos[i].getBBox(); } and my calling way is: .attr("x1", function(d) {return getSize.x; })...
    – Kal
    Nov 25, 2014 at 15:47
  • If you want different arrows for all the links, you need to create separate marker elements with separate IDs. Nov 25, 2014 at 15:48
  • thanks it works but I needed to create vars for the svg line and it works..
    – Kal
    Nov 25, 2014 at 16:00

1 Answer 1

0

if I understood well you'll need to draw an arrow nest to a rect, try with this definition:

svg.append('defs').append('marker')
.attr('id', 'arrow').attr('viewBox', '0 0 10 10')
.attr('refX', 10).attr('refY', 5)
.attr('markerUnits', 'strokeWidth')
.attr('markerWidth', 8)
.attr('markerHeight', 6)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 0 0 L 10 5 L 0 10 z');

and append it in the enter event

var rect = canvas.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
    .filter(condition) 
    .attr("class", function(d) { return d.children ? "parent" : "child"; })
    .attr("x", function(d) { return d.x + 20 ; })
    .attr("y", function(d) { return d.y + 30 ; })
    .attr("width", 30)
    .attr("height", 30)
    .attr("opacity", 0.25)
    .append('line')
    .attr('class','path')
    .attr('marker-end','url(#arrow)');
3
  • thank you I changed the code but it does not make any difference. There is no output and in the console there were no issues...
    – Kal
    Nov 25, 2014 at 15:32
  • I did something similar of what you are doing, take a look to this fiddle I got some inspiration from there jsfiddle.net/yeQS2/89 Nov 25, 2014 at 15:36
  • thanks!! I already tried this approach from forced layout but when I am using multiple layouts I am not able to control all the elements so I moved to this simple approach..
    – Kal
    Nov 25, 2014 at 15:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.