d3通过改变参数化函数使折线图水平动画化

d3 animate line graph horizontally by changing parameterized function

本文关键字：折线图 水平 动画 函数 d3 改变 参数      更新时间：2024-02-22

我试图通过改变d3的均值和方差来动画化高斯。我遇到的问题是，曲线的点只是在Y轴上平移，所以它看起来像一个高斯下降，另一个上升。我如何修改此代码以实现我想要的目标？

//Define the curves, this would be replaced by a function call
var g1 = [{'x': 0, 'y': 0.0}, {'x': 2, 'y': 0.0}, ...];
var g2 = [{'x': 0, 'y': 0.0}, {'x': 2, 'y': 0.0}, ...];
var lineFunction = d3.svg.line()
                     .x(function(d) { return d.x*2; })
                     .y(function(d) { return d.y * 2000; })
                     .interpolate("linear");
var lineGraph = svg.append("path")
                     .attr("d", lineFunction(g1))
                     .attr("stroke", "blue")
                     .attr("stroke-width", 2)
                     .attr("fill", "none");
lineGraph.transition().duration(1000).attr('d', lineFunction(g2));

http://jsfiddle.net/x22xE/104/

感谢meetamit的帮助，以下是（混乱的）解决方案：

var svg = d3.select('#myelement').append('svg')
    .attr('width', 200)
    .attr('height', 200);
function gaussian(u, s, x) {
    var m = s * Math.sqrt(2 * Math.PI);
    var e = Math.exp(-Math.pow(x - u, 2) / (2 * s * s));
    return (e * 1000 / m).toFixed(3); // toFixed is important
}
function pdf(u, s, resolution) {
    var result = [];
    for (var i = 0; i < 200; i += resolution) {
        result.push({x: i, y: gaussian(u, s, i)})
    }
    return result;
}
var lineFunction = d3.svg.line()
                         .x(function(d) { return d.x; })
                         .y(function(d) { return d.y; })
                         .interpolate("linear");
var lineGraph = svg.append("path")
                            .attr("d", lineFunction(pdf(0,5,1)))
                            .attr("stroke", "blue")
                            .attr("stroke-width", 2)
                            .attr("fill", "none");
lineGraph.transition().duration(1000)
    .attrTween('d', function() {
    return function(t) {
        return lineFunction(pdf(150 * t, 5, 1));
    }
  })
相关文章：