如何在D3.js中创建这个二项式点阵

Question

我正在尝试开发一个简单的交互式应用程序来说明二项式期权定价模型.基本上,我想在D3.js中重现此图:

我正在考虑使用树形布局,但这不是树,因为它有循环.我是D3.js的新手,这是一个我试图教自己D3.js的应用程序.通过手动生成这样的晶格,我有点陷入困境.

是否有可能在D3.js中做到这一点？

Answer 1

看看这个jsfiddle.它包含我认为用于生成您描述的二项式点阵的合理代码.

这是小提琴的输出:

通过N仅更改变量,您可以获得不同大小的格子:

我没有在格子上方和旁边包含元素,因为添加它们非常简单.

代码并不完美,我没有太多时间写它,但它看起来它可能是你的好起点,或作为一个例子.

编辑:另外,我不知道何时应在S之后显示下标0,但您可以根据需要更改下标的行为.

附加编辑:如果你真的需要在你的网页上进行数学运算,你可以使用let say jqmath,就像在这个jsfiddle中一样,得到这样的东西:

而且你将jsmath片段与svg集成在一起,如下所示:

var c = vis.selectAll("g") 
c.append("svg:foreignObject") 
  .attr("width", "100px") 
  .attr("height", "100px") 
  .append("body").append("p") 
  .html($(jqMath("p={e^{{rt}{/n}}-d}/{u-d}", "$$")).outerHTML());