时间戳

首页 > 解决方案 > D3 lineRadial 不显示，而其他元素显示

d3.js - D3 lineRadial 不显示，而其他元素显示

问题描述

我将以下“时钟指针”实现为 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");

标签： d3.jslineradial

解决方案

lineRadial不是一个有效的 svg 组件，你必须说line（在你的第二个代码片段中，也不angle是一个有效的line属性，你应该说：

.attr("transform", "rotate(90)")

我建议阅读文档进行旋转，因为它需要 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

最后，请注意角度必须以度为单位传递。

推荐阅读