d3js将箭头添加到一行

时间:2015-11-20 15:13:48

标签: javascript css d3.js svg

我正在尝试添加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")')
;

谁能告诉我这里做错了什么?

1 个答案:

答案 0 :(得分:2)

无法为标记属性分配对svg文件的引用。标记属性要么指定值“无”,要么指定对svg元素的defs元素中列出的标记元素的引用。 marker元素包含用于绘制标记的svg代码。例如......

<p:inputTextarea value="My Name
My Address
My City, State zip"/>

有关标记属性的信息,请访问http://www.w3.org/TR/SVG/painting.html#MarkerElement