径向时间序列，附加圆 [英] Radial time series, appending circles

问题描述

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

I have some circles I want to append to a radial time series chart to indicate key events. Equivalent 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一起使用-这是圆的必需属性

The y(0) scale seems to work fine, because the units are both in pixels, but I can't figure out how to convert degrees to pixels for use with cx -- which is a required attribute for a circle.

刻度设置为:

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

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

问题

如何结合使用d.date和x比例尺为我提供cx属性的像素坐标(而不仅仅是角度/弧度)?

Question

How can I use d.date in conjunction with the x scale to give me a pixel coordinate for the cx attribute (and not simply a degree/radian)?

推荐答案

此处需要一些三角函数.给定您链接的特定bl.ocks，这是您需要的数学运算:

You need a bit of trigonometry here. Given the specific bl.ocks you linked, this is the math you need:

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值.根据您的数据进行更改.

In the bl.coks you linked, Close is the y value and Date is the x value. Change them according to your data.

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

Here is the forked bl.ocks: https://blockbuilder.org/GerardoFurtado/16adc1bb5677adfa501b3a03b3637d75

这篇关于径向时间序列，附加圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！