将点（x，y）添加到带有时间刻度x轴的d3多线图中

Question

我目前正在尝试使用d3.time.scale()为x轴构建一个多线图。

我正在尝试向图形的线条上的每个点添加圆圈，但是到目前为止还没有成功。

当我做类似的事情时：

.attr('cx', function(d){ return x(d.price) })

我得到一个负数。

我当时在考虑设置另一个scale (pointsScale)来处理此问题，但在很大程度上没有成功。

我究竟做错了什么？

请参考我的JSBin代码。

Answer 1

您在这里遇到了一些问题：

• 由于您将x轴设为时间标度，因此我猜测您实际上希望价格为y变量，而日期为x变量。 这就是x(d.price)为负的原因x(d.price)试图将价格解释为日期，但最终没有多大意义。 因此，用以下代码替换上面的代码行： .attr('cy', function(d){ return y(d.price) })
• 为了使圆真正可见，它们需要设置三个参数： cx ， cy和r 。 由于d3已经知道您的x轴是时间标度，因此可以使用.attr('cx', function(d){ return x(d.date) })设置cx 。 您可以将r设为圆的半径。 只需选择一个，否则它将默认为0，您将看不到圆圈。 例如， .attr('r', 4)会将半径设置为完全可见的值4。
• 在绘制线条之前，先绘制圆圈。 结果，线条划过圆圈，看起来有点怪异。 因此，如果要避免这种情况，请将圆圈代码移到行代码之后。

综上所述，这大致就是创建圆的代码的样子，并且应该在声明var paths ：

    var circles = company.selectAll('circle')
      .data(function(d){ return d.values; })
      .enter().append('circle')
      .attr('cy', function(d){
        return y(d.price);}) //Price is the y variable, not the x
      .attr('cx', function(d){
        return x(d.date);}) //You also need an x variable
      .attr('r',4); //And a radius - otherwise your circles have
                    //radius 0 and you can't see them!

更新的jsbin： http ://jsbin.com/gorukojoxu/edit?html，控制台，输出