D3:只对足够近的点进行线性插值

d3: linearly interpolate only close-enough points

本文关键字：线性 插值 D3      更新时间：2023-09-26

假设我有一个具有相应日期[{date: d1, value: v1}, ..., {date: dn, value: vn}]的值数组，我想使用d3.js将其可视化。只要随后的测量是在一定的时间范围内，例如间隔不超过一周，我很高兴d3在测量之间插入。

然而，当后续记录相隔较远时，我不希望d3连接它们。实现这一目标最简单的方法是什么?

你的问题不是很清楚，我相信你所说的"interpolate"是指"connecting the dots"。

如果你在x轴上使用时间刻度，D3将自动为你连接点并创建一条线(SVG path元素)，而不管数据点的时间间隔如何。但是有一种方法可以在该行中制作"间隙":使用line.defined()。根据API:

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

问题是，为了使这种方法起作用，您必须在数据集中设置一个给定的值(假设，null)，在您不想画线的日期之间(即，不足够接近的日期，如您在问题中所说)。您可以手动或使用函数来执行此操作。

这是一个工作演示:在我的数据集中，我的数据从10月7日跳转到10月17日(超过1周)。所以，我只是在这两个日期之间创建了一个null值(在我的演示中，是10月16日)。然后，在行生成器中，行跳转这个null值，使用defined:

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

结果是行从7-Oct跳到17-Oct:

var data = [{date: "1-Oct-16",value: 14},
{date: "2-Oct-16",value: 33},
{date: "3-Oct-16",value: 12},
{date: "4-Oct-16",value: 43},
{date: "5-Oct-16",value: 54},
{date: "6-Oct-16",value: 71},
{date: "7-Oct-16",value: 32},
{date: "16-Oct-16",value: null},
{date: "17-Oct-16",value: 54},
{date: "18-Oct-16",value: 14},
{date: "19-Oct-16",value: 34},
{date: "20-Oct-16",value: 32},
{date: "21-Oct-16",value: 56},
{date: "22-Oct-16",value: 24},
{date: "23-Oct-16",value: 42},
{date: "24-Oct-16",value: 52},
{date: "25-Oct-16",value: 66},
{date: "26-Oct-16",value: 34},
{date: "27-Oct-16",value: 62},
{date: "28-Oct-16",value: 48},
{date: "29-Oct-16",value: 51},
{date: "30-Oct-16",value: 42}];
var parseDate = d3.timeParse("%d-%b-%y");
data.forEach(function (d) {
    d.date = parseDate(d.date);
});
var svg = d3.select("body")
    .append("svg")
    .attr("width", 500)
    .attr("height", 200);
		
var xScale = d3.scaleTime().range([20, 480]);
var yScale = d3.scaleLinear().range([180, 10]);
xScale.domain(d3.extent(data, function (d) {
    return d.date;
    }));
yScale.domain([0, d3.max(data, function (d) {
    return d.value;
    })]);
var xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat("%d"));
var yAxis = d3.axisLeft(yScale);
var baseline = d3.line()
	  .defined(function(d){return d.value != null;})
    .x(function (d) {
      return xScale(d.date);
    })
    .y(function (d) {
      return yScale(d.value);
    });
		
svg.append("path") // Add the valueline path.
.attr("d", baseline(data))
.attr("fill", "none")
.attr("stroke", "teal");
svg.append("g")
    .attr("transform", "translate(0,180)")
    .call(xAxis);
svg.append("g")
.attr("transform", "translate(20,0)")
.attr("class", "y axis")
    .call(yAxis);
<script src="https://d3js.org/d3.v4.min.js"></script>

如果你想画一个折线图，那么我不认为插值是你要找的。构建自定义SVG路径可能是可行的方法。请看下面的例子:

https://bl.ocks.org/joeldouglass/1a0b2e855d2bedc24c63e396b04c8e36

相关文章：