将点（x，y）添加到具有时间轴x轴的d3多线图

Question

我正在尝试构建一个多轴线图，其中x轴为d3.time.scale()。

我正在尝试向图的各行上的每个点添加圆，但到目前为止尚未成功。

当我做这样的事情：

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

我得到一个负数。

我正在考虑设置另一个scale (pointsScale)来处理这个问题，但一直没有成功。

我在做什么错？

请参阅我的代码JSBin。

Answer 1

你运行到这里的几个问题：

• 因为你所做的x轴的时间尺度，我猜你真正想要的价格是变量y，而日期是x变量。这就是为什么x(d.price)是消极的--D3正试图将价格解释为日期，而这最终并没有太大意义。因此，用上面的代码替换上面的代码行：.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,console,output