0

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");
Hans Rottier
  • 102
  • 2
  • 12

1 Answers1

1

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.

Guillermo
  • 1,054
  • 2
  • 9
  • 12
  • Thanks Guillermo, that sounds very reasonable what you say. I'll try it tomorrow and let you know the result! (so what I did was a kind of hybrid error trying to use a d3 function the wrong way). – Hans Rottier Mar 29 '20 at 18:38
  • Sure, let us know how it goes. I just noticed that in the first code snippet you are not setting the x1, x2, y1 and y2 , you will need them in order to draw the line. – Guillermo Mar 29 '20 at 20:27
  • 1
    That does the trick. Easy and logical when you think of it. Thanks!! – Hans Rottier Mar 30 '20 at 08:34