0

I have drawn a spiral using this code:

var width = 1000,
height = 1000,
start = 0,
end = 2.25,
numSpirals = 78,
margin = {top:50,bottom:50,left:50,right:50};

// Constructing the spiral: 

// theta for the spiral

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

// the r works out the space within which the spiral can take shape - the width and height is set above

var r = d3.min([width, height]) / 2 - 40 ;

// The radius of the spiral

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

// inserts svg into the DOM

var svg = d3.select("#chart").append("svg")
  .attr("width", width + margin.right + margin.left)
  .attr("height", height + margin.left + margin.right)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); 

// The path to draw the spiral needs data to inform it, points generates this, and is used in .datum(points) below

var points = d3.range(start, end + 0.02, (end - start) / 2000);

// this is the spiral, utilising the theta and radius generated above

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

But, now I want to draw some lines on top of this spiral, following the existing path of the spiral. These lines will need to connect two different dates across two different columns within the array. I have tried a few approaches, such as d3.line but I can't get the lines to follow the spiral. I imagine I somehow need to reference the initial spiral? I am unsure how to proceed with this though.

Arran
  • 39
  • 6
  • How do you intent to define the points on the spiral? You can get the coords of a point on a path by using the SVG getPointAtLength() method. – enxaneta Jul 19 '21 at 14:36
  • I have this below `var spiralLength = path.node().getTotalLength();` – Arran Jul 19 '21 at 14:45
  • And I use this later for positioning some other shapes on the spiral `var linePer = timeScale(d.vstart), posOnLine = path.node().getPointAtLength(linePer); angleOnLine = path.node().getPointAtLength(linePer); d.linePer = linePer; d.cx = posOnLine.x; d.cy = posOnLine.y; d.a = (Math.atan2(angleOnLine.y, angleOnLine.x) * 360 / Math.PI) - 90; ` – Arran Jul 19 '21 at 14:47

0 Answers0