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