Question

我想在一个文档中有多个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>

Answer 1

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

<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};
});

评论，改进非常受欢迎。

Answer 2

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

一个HTML文档中的多个d3可视化

2 个答案: