可變對象屬性行為

Question

我正在嘗試使用D3框架設置svg path元素的x和y 。 我已編寫此代碼為每個路徑添加source / target節點：

link.enter().insert("path", "g")
            .attr("class", "link")
            .attr("d", function (d) {
                console.dir(d);
                var s = {
                    x: d.source.x0,
                    y: d.source.y0
                };
                var t = {
                    x: d.target.x0,
                    y: d.target.y0
                };

                console.log("tx0: " + d.target.x0 + "; ty0: " + d.target.y0);
                console.dir(t);
                console.log("sx0: " + d.source.x0 + "; sy0: " + d.source.y0);
                console.dir(s);
                //console.dir(o);
                return diagonal({
                    source: s,
                    target: t
                });
            });

運行它時，將獲得以下控制台日志輸出：

有人可以解釋為什么對象輸出中的屬性x0和y0的值與下一個記錄的不同，以及為什么target屬性未定義？

編輯，我編輯此d3示例並使用Chrome

Answer 1

結果看似奇怪的原因是您正在嘗試訪問不存在的屬性。 如果您查看錯誤控制台，則會看到以下五個錯誤：

Error: Problem parsing d="M0,400CNaN,400 NaN, ,"

如果在調試器中逐步執行代碼，則會發現目標鏈接尚未設置x0和y0 ，因此這就是為什么tx0和ty0出現未定義的原因。 為什么是這樣？ 如果您仔細看一下代碼， node.x0和node.y0設置在兩個位置。 首先，在運行樹繪制代碼之前，根節點已設置了以下兩個屬性：

    root = treeData;
    root.x0 = viewerHeight / 2;
    root.y0 = 0;

在繪制圖表之后，將運行以下代碼以將x0和y0添加到所有節點：

    nodes.forEach(function (d) {
        d.x0 = d.x;
        d.y0 = d.y;
    });

如果將一個節點新添加到圖表中，則將不會設置x0和y0 ，而如果之前已顯示，隱藏，然后重新顯示它（例如，當您折疊父節點然后將其展開時），則x0和y0已經定義，因此沒有錯誤或未定義的目標節點屬性。 第一次繪制樹時創建的五個鏈接都為源節點設置了x0和y0 ，因為它是此處的root變量：

    root = treeData;
    root.x0 = viewerHeight / 2;
    root.y0 = 0;

但是在繪制完所有內容並運行以下代碼之后，目標節點才會設置x0和y0 ：

    nodes.forEach(function (d) {
        d.x0 = d.x;
        d.y0 = d.y;
    });

您從console.log語句和console.dir語句看到的內容之間的差異是由於console.log語句評估了代碼在運行時對象的狀態，而console.dir語句可以訪問代碼。當前狀態的對象。 請參閱console.dir和console.log有什么區別？ 欲獲得更多信息。