Блог

Короче говоря, у меня есть спиральная временная шкала, и в настоящее время я привязываю к ней отдельные даты. Это прекрасно работает. Однако я знаю, что хочу отобразить диапазоны дат на этой спирали. Таким образом, в настоящее время данные имеют две колонки с датами: «vstart» и «vend», и это две точки данных, которые я хотел бы соединить. Я знаю, как получить углы этих двух колонн, основываясь на их положении x и y при отображении на спираль. Но я не уверен, как провести радиальную линию между этими двумя точками.

Это код, который в настоящее время используется для рисования начальной спирали:

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

таким образом, радиус определяется как:

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

и угол:

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

Очки:

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

который создает массив, который выглядит следующим образом:

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}]
]}
 

Для того, чтобы иметь две точки для соединения. Я не хочу, чтобы он рисовал непрерывный путь, но рассматривайте каждую линию как новый путь и повторяйте цикл, рисуя путь между vstart и vend и повторяя его.

Итак, я представляю, что если бы я использовал один столбец и рисовал непрерывную линию, код мог бы выглядеть так?

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

Радиус здесь берется из радиуса, который создает исходный радиус для спирали.

Затем:

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

Хотя, когда я пытаюсь это сделать, я получаю ошибку: «Ошибка: атрибут d: Ожидаемое число» MNaN,NaNCNaN,NaN,…».»

Так что любая помощь здесь будет оценена по достоинству…