如何為d3可折疊樹中的節點分配唯一ID

Question

作為 d3 和 javascript 的新手，我試圖通過查看提供的版本來了解可折疊樹的工作原理

http://bl.ocks.org/mbostock/4339083

具體來說，我不明白以下語句如何以及為什么在節點更新后成功地為節點分配唯一 id。

// 更新節點...

  var node = svg.selectAll("g.node")
            .data(nodes, function(d) { return d.id || (d.id = ++i); });

我的理解是節點是一個數組，這個數組有一個關聯的索引 i。 每次更新節點時，上述語句使用從數組索引 i 派生的唯一鍵值 id 將新節點（如數據中的）與網頁上的節點（如可視化表示）綁定。 如果節點數組的一個元素沒有 id，它將被分配 ++i。

這是我感到困惑的地方。 假設第一個節點數組有 4 個元素，因此每個元素的 id 為 1、2、3 和 4。我折疊樹，現在新的節點數組有 3 個元素，它們恰好與第一個節點的前三個元素相同大批。 這些元素的 id 為 1,2 和 3。到目前為止沒有問題。

現在下一個更新的節點數組有 4 個元素，其中第 3 個元素相同，第 4 個元素不同。 上面的代碼正確地為第 4 個元素分配了 5 的 id。

我的理解是

1. 最后一個節點數組有 4 個元素，

2. 這個新的第 4 個元素的索引 i = 3，並且

3. ++i = 4

4. 因此，上面的語句應該將 4 的 id 分配給第 4 個元素。

但代碼改為分配 id=5。 當我在 firebug 調試器中檢查 i 的值時，i 上升到 4，保持在 4，然后在上述場景中上升到 5。

有人可以解釋上述代碼發生了什么以及我的錯誤理解在哪里嗎？

謝謝你。

Answer 1

i在您所指的特定示例中使用的變量與幾乎所有其他 D3 示例相反，是一個全局計數器，用於跟蹤已看到的節點數。 在許多其他情況下，您會看到類似的代碼

.attr("something", function(d, i) { ... })

或者

.data(data, function(d, i) { ... })

在所有這些情況下， i指的是函數的局部變量——數據元素在其數組中的索引。 這是由 D3 傳遞的，並且與您所指的示例中的i完全不同。

如果將所有出現的i替換為counter ，可能有助於更好地理解示例。

Answer 2

您可以使用以下方法為可折疊樹形視圖中的節點 分配唯一的ID ：

.attr('id', function() { return('node_' + makeid()) })

在這里，我在Azle中使用az.makeid（）函數，但是您可以使用任何您喜歡的東西來生成唯一的ID。

我們將其添加到nodeEnter.append（'circle'）函數，如下所示：

// Add Circle for the nodes
 nodeEnter.append('circle').
    attr('class', 'node').
    attr('r', 10).
    style("fill", function(d) {return "#33AADE"})
    .attr('id', function() { return('node_' + makeid()) }) // add id here

在每個節點上都有唯一的ID，我們釋放了各種附加功能 ，從而使我們可以將其他庫與D3一起使用。 例如，當用戶單擊節點時，我們可以使用Azle對特定節點進行着色和動畫處理 ：

svg.selectAll("circle")
    .on("click", function(d) {
        var selected_circles = d3.select(this);
        selected_id = selected_circles._groups[0][0].id;
        az.animate_element('node', get_target_instance(selected_id), {
            "type" : "rubberBand"
        })
        az.delay_event({
            "function" : "$('#' + selected_id).css('fill', 'hotpink')"
        })
    });

結果 ：

飛走動畫：