D3单调插值导致小循环 [英] D3 monotone interpolation causing little loops

问题描述

我在单线插值的线图上显示数据。但在某些情况下，出现小环。

I'm displaying data on a line graph with monotone interpolation. But in some cases little loops appear.

有没有解决这个问题，同时保持相同的外观单调（因此不只是使用线性），并有线命中所有点？

Is there away to fix this while keeping the same look as monotone (so not just using linear) and having the line hit all the points?

JSFiddle在这里显示问题： http://jsfiddle.net/WkvMx/3 /

JSFiddle showing the issue here: 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); })

推荐答案

单调插值用于插值单调数据集，也就是说，y坐标增加的数据集，甚至在这种情况下，不能保证插值函数的单调性，尽管它可以通过修改曲线的切线来实现。切线可以使用 张力 方法，但不能逐点设置。

The monotone interpolation is intended to interpolate monotone datasets, that's it, datasets whose y-coordinate increases, and even in that case, the monotonicity of the interpolation function is not guaranteed, although it can be achieved by modifying the tangents of the curve. The tangents can be controled globally (kind of) using the tension method, but it can't be set point by point.

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

As @Lars pointed out, you can try other interpolation methods better suited for your data, and tweak the tension to get a smooth line that passes by all the input points.

这篇关于D3单调插值导致小循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！