Question

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

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

Answer 1

您的问题并不完全清楚：通过＆＃34;插入＆＃34;，我相信您的意思是＆＃34;连接点＆＃34;。

如果您使用x轴的时间刻度，D3将自动为您连接点并创建一条线（SVG path元素），无论数据点中的时间间隔如何。但是有一种方法可以制造差距＆＃34;在那一行：使用line.defined()。根据API：

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

问题是，要使这种方法有效，您必须在数据集中设置一个给定值（例如，null），在您不知道的日期之间＃ 39; t想要画线（也就是说，足够接近的日期，正如你在问题中所说的那样）。您可以手动或使用功能执行此操作。

这是一个有效的演示：在我的数据集中，我的数据从10月7日跳到10月17日（超过1周）。所以，我刚刚在这两者之间的任何日期创建了null值（在我的演示中，10月16日）。然后，在线生成器中，该行使用null跳转此defined值：

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

结果是该线从10月7日跳到10月17日：

＆＃13;

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);

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

Answer 2

如果您试图绘制折线图，那么我不认为插值是您正在寻找的。构建自定义SVG路径可能是要走的路。请看这里的例子：

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

d3：仅对足够接近的点进行线性插值

2 个答案: