在直线的底部或顶部绘制三角形

Draw triangle at bottom or top of line

本文关键字：顶部 绘制 三角形 底部      更新时间：2023-09-26

在下面的代码中，我试图在线的底部画一个三角形（表示箭头）：

代码：

var svgContainer = d3.select("body").append("svg")
        .attr("width", 200)
        .attr("height", 200);
//Draw the line
var line = svgContainer.append("line")
        .attr("x1", 5)
        .attr("y1", 5)
        .attr("x2", 5)
        .attr("y2", 50)
        .attr("stroke-width", 2)
        .attr("stroke", "black");
line.append("svg:path") 
        .attr("d", d3.svg.symbol.type("triangle-up"))
        .style("fill", "black");

jsfiddle：http://jsfiddle.net/Qh9X5/3420/

但接收错误：

Uncaught TypeError: undefined is not a function

如何在直线的顶部或底部绘制三角形？

首先，您不需要手动制作箭头。SVG有一种方法可以在路径的末尾和/或开头放置标记，它可以旋转标记以匹配路径的角度。看看任何关于SVG箭头的教程，比如这个。

尽管如此，如果你想按照你开始的方式做：

d3.svg.symbol.type("triangle-up")应成为d3.svg.symbol().type("triangle-up")

和

使用svgContainer.append("svg:path")使路径成为行的同级路径，而不是将路径放入行元素（因此无效）的line.append("svg:path")。

相关文章：