javascript - 径向时间序列，附加圆

我有一些圆圈想要附加到径向时间序列图上以指示关键事件。等效块here。

静态图片：



圈子的代码：

 var eventCircles = g.selectAll('.eventCirc')
      .data(eventData)
      .enter()
      .append('circle')
      .attr('class','eventCirc')
      .attr('cx', function(d) { return x(d.date); })
      .attr('cy', function(d) { return y(0)})
      .attr('r', 5)
      .style('fill', "#003366");

y(0)比例尺似乎工作正常，因为单位均以像素为单位，但是我不知道如何将度转换为像素以与cx一起使用-这是圆的必需属性。

刻度设置如下：

var x = d3.scaleTime()
    .range([0, fullCircle]);

var y = d3.scaleRadial()
        .range([innerRadius, outerRadius]);

题

如何将d.date与x比例一起使用，可以为我提供cx属性的像素坐标（而不仅仅是度/弧度）？

最佳答案

您在这里需要一些三角函数。给定您链接的特定bl.ocks，这是您需要的数学运算：

eventCircles.attr('cx', function(d) {
    return y(d.Close) * -Math.sin(x(d.Date) + Math.PI)
  })
  .attr('cy', function(d) {
    return y(d.Close) * Math.cos(x(d.Date) + Math.PI)
  })

在链接的bl.coks中，Close是y值，而Date是x值。根据您的数据进行更改。

这是分叉的bl.ocks：https://blockbuilder.org/GerardoFurtado/16adc1bb5677adfa501b3a03b3637d75

关于javascript - 径向时间序列，附加圆，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56932485/