0

我正在对 SQL 数据库进行可视化表示，并使用 Francois Zaninotto 的CodeFlower（由 D3.js 提供支持）来完成。

我的问题是，如何访问被点击节点的父节点的名称变量？我意识到这个问题看起来类似于How to get data of parent node in d3.js但他们的答案对于我的目的似乎不清楚。我对 D3 也比较陌生，所以这可能就是原因。

我的json代码格式： 

{"name":"CRS_LOG_LEVEL","children":[{"name":"CRS_LOG","children":[{"name":"LOG_DESC","size":7,"type":"column"},{"name":"LOG_ID","size":7,"type":"column"},{"name":"LOG_TMSTMP","size":7,"type":"column"},{"name":"LOG_LEVEL_NBR","size":7,"type":"column"},{"name":"LOG_EVENT_CD","size":7,"type":"column"}],"size":100,"type":"table"}],"size":100,"type":"root"}

我的鼠标点击事件监听器：

CodeFlower.prototype.click = function(d) {
// Toggle children on click.
if (d.children) {  //This makes the node that has children collapse and grow in size.
    d._children = d.children;
    d.children = null;
} else {
    var schemaName;
    var tableName;
    var columnName;
    if(d.type==="column") //only check the parent information if type===column
    {
        columnName = d.name;
        //tableName = Parent's name
        //schemaName = Parent's Parent's name
    }
    d.children = d._children;
    d._children = null;
}
this.update();
};

^ 上面的代码是我在这个问题顶部引用的 GitHub 项目中对 Francois 的 CodeFlower.js 的略微修改版本。

4

2 回答 2

1

如果您更改CodeFlower.prototype.flatten为向每个节点添加父引用，那么稍后在 click 事件中遍历树会很简单。这在结构上类似于 D3 在tree.nodes中所做的，但没有定位逻辑。

于 2013-07-31T04:50:38.873 回答
0

以下代码应该可以完成这项工作。

var JSON = {"name":"CRS_LOG_LEVEL","children":[{"name":"CRS_LOG","children":[{"name":"LOG_DESC","size":7,"type":"column"},{"name":"LOG_ID","size":7,"type":"column"},{"name":"LOG_TMSTMP","size":7,"type":"column"},{"name":"LOG_LEVEL_NBR","size":7,"type":"column"},{"name":"LOG_EVENT_CD","size":7,"type":"column"}],"size":100,"type":"table"}],"size":100,"type":"root"}

for (var i = 0; i<JSON.children.length; i++) {
    for (var j = 0; j<JSON.children[i].children.length; j++) {
        var parentIndex = JSON.children[i].children.indexOf(d);
        if (parentIndex !== -1) {
           var parentName = JSON.children[i].children[parentIndex].name;
        }
    }
}

该变量parentName应包含您要查找的名称。

请注意，您不应var JSON在脚本中包含第一行代码 ( ...)，并且应将 JSON（在我的脚本中）的每个出现都替换为您的数据对象。

于 2013-07-30T21:21:17.710 回答