Javascript d3：仅线性插值足够接近的点

假设我有一个带有相应日期的值数组，

[{date:d1，value:v1}，{date:dn，value:vn}]

，我想使用d3.js将其可视化。只要后续测量在一定的时间范围内，例如间隔不超过一周，我对测量之间的d3插值感到满意

---

然而，当后续记录相距较远时，我不希望d3将它们连接起来。实现这一点最简单的方法是什么？

如果你想画一个折线图，那么我认为插值不是你想要的。构建一个定制的SVG路径可能是一个方向。请参见此处的示例：

---

你的问题不太清楚：我相信你所说的“插入”是指“连接点”

如果对x轴使用时间刻度，D3将自动为您连接点并创建一条线（SVG

path

元素），而不考虑数据点中的时间间隔。但有一种方法可以在这一行中制造“空白”：使用。根据API：

如果指定了defined，则将定义的访问器设置为指定的函数或布尔值，并返回此行生成器

问题是，要使这种方法起作用，您必须在数据集中设置一个给定的值（比如，

null

），在您不想划清界限的日期之间（即，如您在问题中所说，距离不够近的日期）。您可以手动或使用函数执行此操作

这是一个工作演示：在我的数据集中，我的数据从10月7日跳到10月17日（超过1周）。所以，我只是在这两个日期之间的任意日期创建了一个

null

值（在我的演示中，10月16日）。然后，在行生成器中，行使用定义的

跳过此
null
值：

d3.line().defined(function(d){return d.value != null;})

结果是线路从10月7日跳至10月17日：


var数据=[{date:“1-Oct-16”，值：14}，
{日期：“2016年10月2日”，价值：33}，
{日期：2016年10月3日，价值：12}，
{日期：2016年10月4日，价值：43}，
{日期：2016年10月5日，价值：54}，
{日期：2016年10月6日，价值：71}，
{日期：2016年10月7日，价值：32}，
{日期：“16-Oct-16”，值：null}，
{日期：2016年10月17日，价值：54}，
{日期：2016年10月18日，价值：14}，
{日期：2016年10月19日，价值：34}，
{日期：2016年10月20日，价值：32}，
{日期：2016年10月21日，价值：56}，
{日期：2016年10月22日，价值：24}，
{日期：2016年10月23日，价值：42}，
{日期：2016年10月24日，价值：52}，
{日期：2016年10月25日，价值：66}，
{日期：2016年10月26日，价值：34}，
{日期：2016年10月27日，价值：62}，
{日期：2016年10月28日，价值：48}，
{日期：2016年10月29日，价值：51}，
{日期：“2016年10月30日”，价值：42}]；
var parseDate=d3.timeParse（“%d-%b-%y”）；
data.forEach（函数（d）{
d、 日期=解析日期（d.date）；
});
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，200）；
var xScale=d3.scaleTime（）.range（[20480]）；
var yScale=d3.scaleLinear（）.range（[180,10]）；
xScale.domain（d3.extent）（数据，函数（d）{
返回日期；
}));
yScale.domain（[0，d3.max（数据，函数（d））{
返回d值；
})]);
var xAxis=d3.axisBottom（xScale）.tickFormat（d3.timeFormat（“%d”）；
var yAxis=d3.轴左（yScale）；
var基线=d3.line（）
.defined（函数（d）{返回d.value！=null；}）
.x（功能（d）{
返回xScale（d.日期）；
})
.y（功能（d）{
返回Y刻度（d值）；
});
append（“path”）//添加valueline路径。
.attr（“d”，基线（数据））
.attr（“填充”、“无”）
.attr（“笔划”、“水鸭”）；
svg.append（“g”）
.attr（“转换”、“翻译（0180）”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“转换”、“翻译（20,0）”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
你的总体目标是什么？画一个有缺口的趋势（线）图？