Question

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

代码：

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

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

Answer 1

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

但是，如果你想以你开始的方式这样做：

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

和

而不是line.append("svg:path")，它将一个路径放在一个行元素中（因此无效），而不是svgContainer.append("svg:path")使路径成为该行的兄弟。

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

1 个答案: