d3js向線中添加箭頭

Question

我正在嘗試將svg圖像添加為行的標記端。 但是樣式不適用。 這就是我嘗試過的。

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")')
;

誰能告訴我我在做什么錯？

Answer 1

無法為標記屬性分配對svg文件的引用。 標記屬性要么被賦值為“ none”，要么被賦予對svg元素的defs元素中列出的標記元素的引用。 marker元素包含用於繪制標記的svg代碼。 例如...

<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>

有關標記屬性的信息， 請訪問http://www.w3.org/TR/SVG/painting.html#MarkerElement