1

So in short I have a spiral timeline and currently map single dates on to it. This works fine. However I know want to map date ranges on this spiral. So currently the data has two columns with dates in: 'vstart' and 'vend' and these are the two data points I'd like to connect. I know how to get the angles of these two columns based upon their x and y position when mapped onto the spiral. But I'm unsure how to draw a radial line between these two points.

This is the code currently used to draw the initial spiral:

var spiral = d3.radialLine()
            .curve(d3.curveCardinal)
            .angle(theta)
            .radius(radius);

    var path = svg.append("path")
  .datum(points)
  .attr("id", "spiral")
  .attr("d", spiral)
  .style("fill", "none")
  .style("stroke", "grey")
  .style("stroke", ("6, 5"))
  .style("opacity",0.5);

so radius is defined as:

var radius = d3.scaleLinear()
            .domain([start, end]) 
            .range([40, r]);

and angle:

var theta = function(r) {
  return numSpirals * Math.PI * r;
};
console.log(theta);

points:

var points = d3.range(start, end + 0.001, (end - start) / 779)

which produces an array that looks like this:

cropped screenshot of sample of array produced by the code above

This successfully produces a spiral, and now I want to map some individual radial lines on this same path but related to dates.

So for example for 'vstart':

var linePerS = timeScale(d.vstart)
angleOnLineS = path.node().getPointAtLength(linePerS);
d.linePerS = linePerS;
d.x = angleOnLineS.x;
d.y = angleOnLineS.y;
d.a = (Math.atan2(angleOnLineS.y, angleOnLineS.x) * 360 / Math.PI) - 90;

And then the same but configured to 'vend'

So I can get the angle of the dates as mapped on the spiral but then how do I draw a radial line between the angle of vstart and vend?

I was wondering if I had to do something like this:

var arcUn = function(d,i) { [ 
            [{"x": d.vstart, "y": d.vstart},
            {"x": d.vend, "y": d.vend}]
]}

In order to have two points to connect. I don't want it to draw a continuous path but treat each line as a new path and loop through drawing a path between vstart and vend and repeating.

So I imagine if I was using one column and drawing a continuous line the code might look like this?

    var arcs = d3.radialLine()
            .curve(d3.curveCardinal)
            .angle(function(d,i){var linePerS = timeScale(d.vstart)
angleOnLineS = path.node().getPointAtLength(linePerS);
d.linePer = linePer;
d.x = angleOnLineS.x;
d.y = angleOnLineS.y;
d.a = (Math.atan2(angleOnLine.y, angleOnLine.x) * 360 / Math.PI) - 90;
return d.a;
  })
            .radius(radius);

Radius here is taken from the radius that generates the original radius for the spiral.

Then:

svg.append("path")
  .datum(spiralData)
  .attr("id", "arcs")
  .attr("d", arcs)
  .style("fill", "none")
  .style("stroke", "blue")
  .style("stroke", ("6, 5"))
  .style("opacity",0.5);

Though when I try this I get an error: "Error: attribute d: Expected number, "MNaN,NaNCNaN,NaN,…"."

So any help here is appreciated...

Arran
  • 39
  • 6

0 Answers0