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/

也纠正了焦点线......因为它们也需要相应地翻译。

D3 Scatter点与x轴排列

1 个答案: