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指出的那样，您可以尝试其他更适合您数据的插值方法，并调整张力以获得通过所有输入点的平滑线。

D3单调插值导致小循环

1 个答案: