CODEWITHSUNDEEP
javascriptcssd3.jssvg
Fawzan
Fawzan

Reputation: 4849

d3js adding an arrow head to a line

I am trying to add a svg image as a marker-end of a line. But the style is not applying. This is what I have tried. 

var g = d3.select('#svg').append('g');
var a = d3.select('#start');
var b = d3.select('#end');

g
    .append('line')
    .attr('x1', Number(a.attr('x')) + Number(a.attr('width')))
    .attr('y1', Number(a.attr('y')) + Number(a.attr('height')) / 2)
    .attr('x2', Number(b.attr('x')))
    .attr('y2', Number(b.attr('y')) + Number(a.attr('height')) / 2)
    .style('stroke', 'black')
    .style('stroke-width', '2px')
    .style('marker-end', 'url("/assets/svg/tooltip_arrow_color.svg")')
;

Can anyone tell me what I am doing wrong here?

Upvotes: 0

Views: 1447

Answers (1)

Bobby Orndorff
Bobby Orndorff

Reputation: 3335

Marker properties can not be assigned a reference to a svg file. Marker properties are either assigned the value "none" or assigned a reference to a marker element listed in the defs element of the svg element. The marker element contains the svg code for drawing the marker. For example...

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="Triangle" viewBox="0 0 10 10" refX="0" refY="5" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" style="fill: black; stroke: none;"/>
    </marker>
  </defs>
  <rect x="1" y="1" width="398" height="198" style="fill: none; stroke: blue; stroke-width: 1;" />
  <path d="M 100 75 L 200 75 L 250 125" style="fill: none; stroke: black; stroke-width: 10; marker-end: url(#Triangle);" />
</svg>

Information on marker properties can be found at http://www.w3.org/TR/SVG/painting.html#MarkerElement

Upvotes: 2

Related Questions