Question

在我正在处理的应用程序中，我们需要使用D3显示可折叠的树形图。将放入此图中的数据不存储在文件中，而是存储在数据库中，通过Ajax调用传递给JavaScript到休息服务并存储到JSON格式的var中。

Ajax调用正在返回正确的数据，我将它存储到var json_data中。这是Ajax代码：

var json_data;

jQuery.getJSON("/ux/resources/graph", function(json){
    json_data = json;
    init(); //This calls the entire D3 setup 
});

如上所示，我等到数据返回渲染D3之后。

这是我的init方法。

function init(){
    d3.json(json_data, function(error, json) {
        root = json;
        root.x0 = height / 2;
        root.y0 = 0;

        function collapse(d) {
            if (d.children) {
                d._children = d.children;
                d._children.forEach(collapse);
                d.children = null;
            }
        }

        root.children.forEach(collapse);
        update(root);
    });

    d3.select(self.frameElement).style("height", "800px");
};

如何让D3识别json_data输入并从中创建图形？

Answer 1

d3.json()与jQuery.getJSON完全相同：它从网址加载json。因此，如果您已经使用jQuery加载d3.json()，那么从init()调用d3.json()是不必要的。除此之外，getJSON()的第一个参数应该是数据的URL，而不是您正在显示的数据本身。

可能适当的做法就是抛弃jQuery d3.json()调用并立即调用init（并将正确的url传递给init();// no $.getJSON() needed function init(){ d3.json("/ux/resources/graph", function(error, json) { ...：

d3.json()

如果您更喜欢通过jQuery加载数据，那么只需将加载的数据传递给init方法并跳过jQuery.getJSON("/ux/resources/graph", function(json){ init(json); //This calls the entire D3 setup }); function init(json) { // json is passed in root = json; // Notice that here's you're modifying the loaded json. // Probably fine, but be aware of it. root.x0 = height / 2; root.y0 = 0; ...调用：

{{1}}

使用变量数据加载D3可折叠树

1 个答案: