javascript - D3 单调插值导致小循环

Question

我正在使用单调插值在折线图上显示数据。但在某些情况下会出现小循环。

有没有办法解决这个问题，同时保持与单调相同的外观(所以不仅仅是使用线性)并使线条击中所有点？

JSFiddle 在此处显示问题:http://jsfiddle.net/WkvMx/3/

要复制的代码:

var data = 
[
    {date: '2013-08-01', value: 234},   
    {date: '2013-08-02', value: 244},   
    {date: '2013-08-04', value: 1034},   
    {date: '2013-08-06', value: 1004},   
    {date: '2013-08-28', value: 234},   
    {date: '2013-08-29', value: 233}  
]

var width = 500;
var height = 250;

var parse = d3.time.format("%Y-%m-%d").parse;

var x = d3.time.scale()
   .range([0, width])
   .domain([parse('2013-08-01'), parse('2013-09-01')]);

var max = d3.max(data, function (v) { return v.value; });
var min = d3.min(data, function (v) { return v.value; });

var y = d3.scale.linear()
   .range([height, 0])
   .domain([min, max]).nice(); 

var line = d3.svg.line()
   .interpolate("monotone")
   .x(function(d) { return x(parse(d.date)); })
   .y(function(d) { return y(d.value); });

var svg = d3.select('body').append("svg")
   .attr("width", width)
   .attr("height", height)

svg.append("path")
   .datum(data)
   .attr("class", "line")
   .attr("d", line)
   .attr("stroke", 'red')

var circlegroup = svg.append("g")

circlegroup.selectAll(".dot")
   .data(data)
   .enter().append("circle")
   .attr("r", 3)
   .attr("cx", function(d) { return x(parse(d.date)); })
   .attr("cy", function(d) { return y(d.value); })

Answer 1

monotone interpolation旨在对单调数据集进行插值，即 y 坐标增加的数据集，即使在这种情况下，也不能保证插值函数的单调性，尽管可以通过修改曲线的切线来实现。可以使用 tension 全局(某种程度上)控制切线。方法，但不能逐点设置。

正如 @Lars 指出的，您可以尝试其他更适合您的数据的插值方法，并调整张力以获得通过所有输入点的平滑线。