我将以下"时钟指针"实现为lineRadial。然而,它并没有显示出来。为什么不呢?
const line = d3.select("svg")
.append("lineRadial")
.attr("angle", -Math.PI / 2)
.attr("radius", 60)
.attr("stroke", "red")
.attr("stroke-width", "2")
.attr("transform", "translate(60,60)");
我不明白,我在svg中有其他元素可以很好地工作。甚至还有另一行(如下图所示(可以找到。有什么解释吗?有什么不同吗?
const line = d3.select("svg")
.append("line")
.attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", -60)
.attr("stroke", "red")
.attr("stroke-width", "2");
lineRadial
不是一个有效的svg组件,您必须说line
(就像在您的第二个代码片段中一样,angle
不是有效的line
属性,您应该说这样的话:
.attr("transform", "rotate(90)")
我建议阅读文档中的rotate,因为它需要3个参数。这是一个说明:The rotate(<a> [<x> <y>]) transform function specifies a rotation by a degrees about a given point. If optional parameters x and y are not supplied, the rotation is about the origin of the current user coordinate system. If optional parameters x and y are supplied, the rotate is about the point (x, y).
来自https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
最后,请注意,角度必须以度为单位。