使用 function-plot.js 繪制函數(shù)圖像
原文鏈接：http://blog.ccyg.studio/article/a990ef39-a99d-4b8e-a96f-34e9db046366
簡(jiǎn)書(shū)對(duì) markdown 的支持有限翼馆，建議點(diǎn)擊原文鏈接查看砰粹。
繪制圖像
<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>
如圖所示耕皮，這個(gè)函數(shù)圖像就是由 function-plot.js 繪制出來(lái)的宪迟。其中我繪制了下面三個(gè)函數(shù)：
其中我在 的函數(shù)圖像上繪制了與鼠標(biāo)位置對(duì)應(yīng)的切線（也就是提供了的導(dǎo)數(shù)）。而
是
的簡(jiǎn)單泰勒展開(kāi)，可以看到兩個(gè)函數(shù)在趨向于0的過(guò)程中是及其相似的，也就是所謂的等價(jià)無(wú)窮小，也就是為什么
斥难。
具體實(shí)現(xiàn)
首先在頁(yè)面中定義繪制的對(duì)象和引入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>
然后寫(xiě) javascript 代碼進(jìn)行繪制，用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();
});
