gpt4 book ai didi

javascript - d3 通过更改参数化函数水平制作线图动画

转载 作者:行者123 更新时间:2023-11-27 23:07:12 31 4
gpt4 key购买 nike

我正在尝试通过使用 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));
}
})

关于javascript - d3 通过更改参数化函数水平制作线图动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36486706/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com