如何绘制绘制数学函数的自动缩放D3.js图? [英] How can I draw an autoscaling D3.js graph that plots a mathematical function?
问题描述
我有工作的jsfiddle ,它是使用JSXGraph(用于数学函数的图形工具包)制作的.我想将其移植到D3.js进行个人化,但是我很难入门.
I have a working jsfiddle that I made using JSXGraph, a graphing toolkit for mathematical functions. I'd like to port it to D3.js for personal edification, but I'm having a hard time getting started.
jsfiddle绘制了-ke(-x/T) + k
的值,其中x是一个自变量,而k
和t
的值来自滑块.
The jsfiddle graphs the value of -ke(-x/T) + k
, where x is an independent variable and the values of k
and t
come from sliders.
board.create('functiongraph',
[
// y = -k * e(-x/t) + k
function(x) { return -k.Value()*Math.exp(-x/t.Value()) + k.Value(); },
0
]
);
我最难过的三件事:
-
实际上是绘制图形及其轴-我不清楚我应该使用D3 API的许多部分中的哪个,或者应该在哪个抽象级别上进行操作.
Actually drawing the graph and its axes - it's not clear to me which of the many parts of the D3 API I should be using, or what level of abstraction I should be operating at.
在更改滑块时重新渲染图形,并使图形知道滑块的值.
Re-rendering the graph when a slider is changed, and making the graph aware of the value of the sliders.
缩小图表,使由y = k定义的渐近线始终可见,并且不在图表的前15%之内.我现在通过以下方式执行此操作:
Zooming out the graph so that the asymptote defined by y = k is always visible and not within the top 15% of the graph. I do this now with:
function getAestheticBoundingBox() {
var kMag = k.Value();
var tMag = t.Value();
var safeMinimum = 10;
var limit = Math.max(safeMinimum, 1.15 * Math.max(k.Value(), t.Value()));
return [0, Math.ceil(limit), Math.ceil(limit), 0];
}
我要解决这个问题的正确方法是什么?
What's the right way for me to tackle this problem?
推荐答案
我将此示例真正地放在一起 ,所以请不要在代码质量上惹恼我.但这应该为您如何在d3
中执行类似操作提供一个良好的起点.我直接在d3
中实现了所有内容,甚至是滑块.
I threw this example together really quick, so don't ding me on the code quality. But it should give you a good starting point for how you'd do something like this in d3
. I implemented everything in straight d3
, even the sliders.
正如@LarKotthoff所说,关键是您必须循环使用函数并构建数据:
As @LarKotthoff says, the key is that you have to loop your function and build your data:
// define your function
var func = function(x) {
return -sliders.k() * Math.exp(-x / sliders.t()) + sliders.k();
},
// your step for looping function
step = 0.01;
drawPlot();
function drawPlot() {
// avoid first callback before both sliders are created
if (!sliders.k ||
!sliders.t) return;
// set your limits
var kMag = sliders.k();
var tMag = sliders.t();
var safeMinimum = 10;
var limit = Math.max(safeMinimum, 1.15 * Math.max(kMag, tMag));
// generate your data
var data = [];
for (var i = 0; i < limit; i += step) {
data.push({
x: i,
y: func(i)
})
}
// set our axis limits
y.domain(
[0, Math.ceil(limit)]
);
x.domain(
[0, Math.ceil(limit)]
);
// redraw axis
svg.selectAll("g.y.axis").call(yAxis);
svg.selectAll("g.x.axis").call(xAxis);
// redraw line
svg.select('.myLine')
.attr('d', lineFunc(data))
}
这篇关于如何绘制绘制数学函数的自动缩放D3.js图?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!