d3.jslineradial

D3 lineRadial does not show while other elements do show

I have the following 'hand of a clock' implemented as a lineRadial. However, it does not show. Why not? 

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)");

I don't understand, I have other elements in the svg which work fine. Even another line (shown below) which works find. Any explanation? Is there any difference?

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");
Solution

  • lineRadial is not a valid svg component, you must say line (as in your second code snippet, also, angle is not a valid line attribute, you should say something like:

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

    I would recommend to read the doc for rotate, as it takes 3 parameters. Here is an explanation: 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). from https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

    Finally, please note that the angle must be passed in degrees.