使用 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();
});

参考资料

• https://mauriciopoppe.github.io/function-plot/