Problem drawing a line and understanding the passed data-CodePudding

I try to render

I am a bit confused, how the log can tell me something different at runtime...

CodePudding user response：

I just check a bit the d3 docs (perhafs someone with more experience can help you more), but we are going to begin with some easy:

array=[[10, 60], [40, 90], [60, 10], [190, 10]]
p=d3.line()(this.array)

create in SVG a path with the points of the lines

<svg fill="transparent" stroke="black">
  <path [attr.d]="p"/>
</svg>

When you have a d3.lineRadial you "feed" with an array of values "angle and radius"

  array=[[0, 0][1.0471975511965976, 2][2.0943951023931953, 4]....]
  p=d3.line()(this.array)

But calculate the radius and angle is some "hard". So, we can create a function (1)

myfunction=d3.lineRadial()
  .angle((d, i) => (Math.PI / 4) * i)
  .radius((d, i) => (length - i) * 2)

And we can use this function to create the "path" of a svg

p=this.myfunction({length:13})

If you want to "rounded" the "spiral" use .curve(d3.curveBundle.beta(0.85)) Well, you can use all in an unique instrucction

 p = d3
    .lineRadial()
    .curve(d3.curveBundle.beta(0.85))
    .angle((d, i) => (Math.PI / 4) * i)
    .radius((d, i) => (length - i) * 2)({length:13});

(1) See how work the function, you use,e.g. .angle((d,i)=>a function of "i". then, when you execute the function with an object with property length i goes from 0 to length-1 and return [0, PI/4,2PI/4,3PI/4,...]. but d is nothing