使用 function-plot.js 绘制函数图像
原文链接：http://blog.ccyg.studio/article/a990ef39-a99d-4b8e-a96f-34e9db046366
简书对 markdown 的支持有限，建议点击原文链接查看。
绘制图像
<div class="ui segment">
<div id="root"></div>
</div>
<div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.0/dist/jquery.min.js"></script>
<script src="https://unpkg.com/d3@3/d3.min.js"></script>
<script src="https://unpkg.com/function-plot@1/dist/function-plot.js"></script>
</div>
<script>
/* jshint esversion: 6 */
function plot() {
functionPlot({
target: "#root",
width: ('#root').width() / 1.77,
yAxis: {
domain: [-1, 9]
},
tip: {
renderer: function () {}
},
grid: true,
data: [{
fn: "x^2",
derivative: {
fn: "2 * x",
updateOnMouseMove: true
}
},{
fn: "sin(x)",
},{
fn: "x - 1/6 * x^3",
}
]
});
}
$(document).ready(function () {
plot();
});
$(window).resize(function () {
plot();
});
</script>
如图所示，这个函数图像就是由 function-plot.js 绘制出来的。其中我绘制了下面三个函数：
其中我在 的函数图像上绘制了与鼠标位置对应的切线（也就是提供了的导数）。而
是
的简单泰勒展开，可以看到两个函数在趋向于0的过程中是及其相似的，也就是所谓的等价无穷小，也就是为什么
。
具体实现
首先在页面中定义绘制的对象和引入js文件:
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.0/dist/jquery.min.js"></script>
<script src="https://unpkg.com/d3@3/d3.min.js"></script>
<script src="https://unpkg.com/function-plot@1/dist/function-plot.js"></script>
然后写 javascript 代码进行绘制，用jquery额外处理了浏览器窗体变化之后重绘的尺寸。
/* jshint esversion: 6 */
function plot() {
functionPlot({
target: "#root",
width: $('#root').width(),
height: $('#root').width() / 1.77,
yAxis: {
domain: [-1, 9]
},
tip: {
renderer: function () {}
},
grid: true,
data: [{
fn: "x^2",
derivative: {
fn: "2 * x",
updateOnMouseMove: true
}
},{
fn: "sin(x)",
},{
fn: "x - 1/6 * x^3",
}
]
});
}
$(document).ready(function () {
plot();
});
$(window).resize(function () {
plot();
});
