在 WebViewer 的 FileMaker for D3 中加载 JSON 文件

Question

我正在尝试在 FileMaker 解决方案中实现 D3 图形和图表。我坚持正确加载 JSON 文件，以便在 webviewer 中显示的 D3 代码中使用。

我正在将所有 JS 库加载到全局变量（$$LIB.D3.JS、$$LIB.JQUERY.JS 等）。然后我将 HTML 代码放在布局上（给出一个对象名称，即 html）。 Web 查看器获取 HTML 代码（来自布局上的文本框）和 JS 代码（来自全局变量）来呈现页面。这一切都很好。（我正在使用此处详述的方法：https://www.youtube.com/watch?v=lMo7fILZTQs）

然而，我的 D3 代码使用 getJSON() 函数获取 JSON，解析数据并创建可视化。我想不出从 FileMaker 中获取 JSON 文件作为文件的方法。我可以将 JSON 文件的内容放入 FileMaker 变量并将其输入 HTML，但我将无法使用 getJSON()。我将不得不重做 D3 代码以从 JS 变量获取数据并解析变量中的数据。

我有没有办法加载 JSON 文件，以便 FileMaker 可以使用它在 WebViewer 中正确呈现可视化效果。

Answer 1

你有两个选择。

1. 将 JSON 计算为您提到的 HTML。你的权利，你将不得不改变你用 d3 加载 JSON 的方式。但这并不难。当您从磁盘加载 JSON 时，使用类似 d3.json('/data.json', callback) 的东西，您只是加载 json 然后将其提供给回调函数。如果 JSON 在 HTML 页面中，类似于 var embeddedJSON 您可以直接使用 embeddedJSON 调用回调，例如

callback (embeddedJSON)

您的代码可能看起来更像这样。

d3.json('/data.json', function(data){
   // bunch of d3 code
})

本例中的回调是一个匿名函数。你可以这样改。

var render = function(data){
   // bunch of d3 code
})
// then call render with your json variable that you embedded into the html
render ( embeddedJSON )

那会很好用。

2. 将html 页面导出到临时目录，并将包含数据的json 文件导出到它旁边。然后使用 file://url 显示 html。在这种情况下，您可以使用 d3.json(/data.json, callback )，它也可以正常工作。

这些方法各有优缺点，但都很管用。

Answer 2

在大多数情况下，在 Webviewer 中集成 javascript 或其他资产的最佳做法是将资产推送到临时目录（使用 FileMaker 中的 GetTemporaryPath() 获取），然后您可以直接导出资产命名文件。完成后，您可以使用 file:// 协议在代码中引用这些文件。

与旧方法相比，这有很多优点，例如将所有内容加载到全局变量中。其中最大的一项是，如果您将 JSON 加载到一个离散文件中并且不 "pollute" 任何其他包含 FileMaker 数据的文件，您就可以完全在您选择的代码环境中工作，然后只需将 Web JavaScript 库、html、CSS 和其他资产直接移动到您的 FileMaker 解决方案中。

在 WebViewer 的 FileMaker for D3 中加载 JSON 文件

Loading JSON FIle in FileMaker for D3 in WebViewer

javascript

json

filemaker

d3.js