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

いくつかの原点補正を行いました。円はそうuが中央からそれらを描画するためにそれらを変換する必要が...左上の共同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/

はまた、...フォーカスラインを修正しました彼らもそれに応じて翻訳する必要があります。