D3散點不符合X軸

Question

我試圖用D3繪製時間尺度。但是，散點不與x軸對齊。它們略微向右偏移。有什麼建議麼？

https://jsfiddle.net/kevinjhc/maaek6tb/1/

var data = [ 
    { 
    date: "2016-05-22T09:33:57-04:00", 
    value: 80 
    } 
] 

var x = d3.time.scale() 
      .domain(d3.extent(data, function(d) { return new Date(d.date); })) 
      .range([ 0, width ]); 

g.selectAll("scatter-dots") 
    .data(data) 
    .enter().append("svg:circle") 
     .attr("cx", function (d) { return x(new Date(d.date)); }) 
     .attr("cy", function (d) { return y(d.value); }) 
     .attr("r", 8); 

Answer 1

做了一些原點校。圓圈得到從左上方共同ordiates繪製...所以我只好翻譯它們從中心繪製它們：

g.selectAll("scatter-dots") 
.data(data) 
.enter().append("svg:circle") 
    .attr("cx", function (d) { return x(new Date(d.date)); }) 
    .attr("cy", function (d) { return y(d.value); }) 
    .attr('transform', 'translate('+ -rad/2 + ',' + -rad/2 + ')') 
    .attr("r", rad); 

檢查：https://jsfiddle.net/maaek6tb/3/

還糾正了重點線......爲他們也需要進行相應的翻譯。