0

我想在一个文档中有多个 d3 可视化。我的想法是存储一些配置，例如 RESTful 服务的 url 以及 SVG 标签属性。在文档加载时，d3 将读取属性并从服务器加载数据并创建可视化。通过这种方式，我可以在保持可视化完整的同时编辑/重新排列文档。

我的问题是是否已经有一种标准化的方式（最佳实践）来做到这一点？还是有一些插件或我可以使用的东西？

改变：我意识到我应该提到我想用相同的代码创建不同的文档。因此，文档定义了可视化的内容（而不是代码）。

具有 SVG 属性的示例文档：

...
<head>
...
<svg width="200"... src="localhost:8000/rest/host1/cpu" type="os.line">...</svg>
<svg width="200"... src="localhost:8000/rest/host1/memory" type="os.bar">...</svg>
4

2 回答 2

1

最后我决定将配置移动到段落中（与编辑器很好地集成）：

<p class="plot" src="localhost:8000/rest/host1/cpu" type="os.line">...</p>
<p class="plot" src="localhost:8000/rest/host1/memory" type="os.bar">...</p>

...这是我的代码：

define(['lib/d3.v3.min'], function(ignore) {

    var visualise = function(plugins) {
        var _host = function(src) {
            return src.split("/")[4];
        };

        var _plot = function(type) {
            var parts = type.split(".", 2);
            return plugins[parts[0]][parts[1]];
        };

        d3.selectAll("p.plot")
            .each(function() {
                var div = d3.select(this);
                var plot = _plot(div.attr("type"));
                var url = div.attr("src");
                var host = _host(url);
                d3.csv(url, function(data) {
                    div.call(plot, data, host);
                });
            });
    };

    return {visualise: visualise};
});

评论，改进非常受欢迎。

于 2013-07-13T09:49:48.427 回答
0

为什么不直接将每个可视化附加到不同的 div？

于 2013-07-12T19:35:23.127 回答