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

Question

我想将一些圆圈附加到径向时间序列图表中以指示关键事件。等效 block 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属性的像素坐标(而不是只是度/弧度)？

Answer 1

这里你需要一些三 Angular 学知识。考虑到您链接的特定 block ，这是您需要的数学:

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 值。根据您的数据更改它们。

这是 fork 的 bl.ocks:https://blockbuilder.org/GerardoFurtado/16adc1bb5677adfa501b3a03b3637d75