d3.js - D3 在时间轴上插值折线图

Question

我有一个非常基本的折线图，用于根据时间绘制一些数据。这一切都很好，但是我需要解决的问题是时间轴上的图非常接近。

考虑以下数据点:

{ "Id": 101, x:15, y: 10, "OriginDt": "2012-12-01T18:49:06"}
{ "Id": 101, x:15, y: 10, "OriginDt": "2012-12-02T28:49:06"}
{ "Id": 101, x:15, y: 10, "OriginDt": "2012-12-03T18:49:06"}
{ "Id": 101, x:15, y: 10, "OriginDt": "2012-12-04T08:10:06"}
{ "Id": 101, x:15, y: 10, "OriginDt": "2012-12-04T09:21:06"}
{ "Id": 101, x:15, y: 10, "OriginDt": "2012-12-04T11:32:06"}

对于前 3 个点，图表看起来不错，但一旦它到达短时间内发生的数据，数据就会开始聚集在一起，很难在图表中欣赏。

我一直试图在网上找到处理此类问题的示例，但尚未找到。

我试过在轴上使用基本插值命令，但这些命令不起作用。

我怎样才能改变我的坐标轴:

var yAxis = d3.svg.axis()
    .tickSize(-width).tickPadding(10)
    .scale(y)
    .orient("left");

要在这些情况下“分散”点数？

Answer 1

这将是一条评论，但我没有必要的声誉。

您可能想查看 cartesian fisheye distortion