將點（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