Javascript 径向时间序列，附加圆

我想在径向时间序列图上添加一些圆圈，以指示关键事件。等效块

静态图片：

圆圈的代码：

 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.OCK，这是您需要的数学：

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：