D3 Streupunkte sind nicht mit der X-Achse ausgerichtet

Question

Ich versuche eine Zeitskala mit D3 zu zeichnen. Die Streupunkte stimmen jedoch nicht mit der x-Achse überein. Sie sind leicht nach rechts versetzt. Irgendwelche Vorschläge?

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

haben einige Ursprung Korrektur. Die Kreise gehen von dem linken oberen Co-ordiates gezogen ... so u müssen sie übersetzen sie von der Mitte zu ziehen:

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); 

Kontrolle: https://jsfiddle.net/maaek6tb/3/

auch die Fokuslinien korrigiert ... als Sie müssen auch entsprechend übersetzt werden.