我如何從孩子那里獲得父母的信息？

Question

我正在對SQL數據庫進行可視化表示，並使用Francois Zaninotto的CodeFlower （由D3.js驅動）進行此操作。

我的問題是，如何訪問被單擊節點的父節點的名稱變量？ 我意識到這個問題看起來與如何在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進行的稍微修改的版本。

Answer 1

如果更改了CodeFlower.prototype.flatten以向每個節點添加父引用，則稍后在單擊事件中遍歷樹將很簡單。 這在結構上與D3在tree.nodes中的類似，但是沒有定位邏輯。

Answer 2

以下代碼可以完成這項工作。

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的所有外觀（在我的腳本中）。