javascript - 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

做了一些原点修正。圆圈是从左上角坐标绘制的......所以你必须平移它们以从中心绘制它们:

 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/

还纠正了焦点线...因为它们也需要进行相应的翻译。