Javascript D3从日期计算x位置

我有一个D3图，其中我在x轴上根据y轴上的一些值绘制时间（

hh:mm

）

对于x刻度，我使用这个逻辑

    const currentData : string[] = ['06:00', '12:00', '18:00'];

    this.x = d3Scale.scalePoint(
      [0, this.width - this.margin.right - this.margin.left])
      .domain(
        currentData.map(
          (d: PlotData) => d.time))
      .round(true);
   

这很好地绘制了我所有的数据。现在我想使用

this.x

返回当前不在原始数据中的时间点的值。但是当我用

this.x('14:00')

它返回

NAN

，这似乎是因为输入不在

currentData

数组中，并且只处理数组中的值

我是否需要自己插值这个值，或者是否有D3函数来获取

this.x

并在内部计算

this.x（'14:00'）

谢谢，

---

EL

使用

scaleTime

const currentData:string[]=['06:00'，'12:00'，'18:00']；
this.x=d3.scaleTime（）
.domain（（d:PlotData）=>d.time））
.范围（[0，this.width-this.margin.right-this.margin.left]）；
this.x（新日期时间（'xyz:abc'））

另一个答案建议了正确的方法，即使用d3 scaleTime。我想深入探讨为什么您会看到您的问题，然后用d3 scaleTime提供解决方案的详细信息

序数音阶

d3.scalePoint

是一种顺序刻度。域表示一组离散且不连续的值。域到范围的映射基于域值的指定顺序。域中的第一个值映射到范围中的第一个值（使用d3.scalePoint），而不管其值与域中的其他值相比如何

因此，只有域中存在的值才能映射到范围：域中的值之间没有语义/数量关系，允许在值之间插入。因为您使用的是定量数据，而不是定性或有序数据，所以您希望使用一个将领域视为连续的尺度

在某些情况下，您可能希望对基于时间的数据使用d3.scalePoint/Band比例，但在这些情况下，您需要能够构建需要绘制的所有值的完整域

你的刻度似乎把你的数据绘制成连续的，首先是巧合，如果你的中域值是“07:00”、“六月”或“昨天”，它会出现在你的范围中间。选择“12:00”隐藏了这样一个事实，即比例不是基于其值，而是仅基于其索引来定位它

连续音阶

缩放时间是d3的连续缩放之一

连续比例将连续的定量输入域映射到连续的输出范围。（）

域和范围

对于d3的连续音阶，域和范围必须包含相同数量的元素-如果每个域和范围中有两个以上的元素，则域和范围将分割为多个部分：

 .domain([a,b,c]) // where a,b,c are quantitative
 .range([1,2,3])

a和b之间的值将在1和2之间插值，同样，b和c之间的值将在2和3之间插值。若域和范围有不同数量的元素，D3将跳过多个元素的多余值

在您的情况下，似乎只有两个域值就足够了，即您要传递到刻度的最小值和最大值

使用日期

d3.scaleTime的域需要设置日期对象，而不是像“12:00”这样的字符串，此外，当向刻度传递值（

scale（x）

）时，我们需要传递日期对象。我们可以使用以下工具创建基本的d3日期解析器：

 d3.parseTime("%H:%M")

这给了我们：

const currentData=['06:00'，'12:00'，'18:00']；
const parse=d3.timeParse（“%H:%M”）
常量x=d3.scaleTime（）
.范围（[0100]）
.domain（d3.extent（currentData，（time）=>parse（time）））
log（“15:00缩放到：”，x（解析（'15:00'））
log（“06:00缩放到：”，x（解析（'06:00'））