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