javascript - 可变对象属性行为

我正在尝试使用D3框架设置svg x元素的y和path。我编写了以下代码，为每个路径添加了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 example并使用Chrome

最佳答案

结果看似奇怪的原因是您正在尝试访问不存在的属性。如果您查看错误控制台，则会看到以下五个错误：

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语句相比，它们可以访问代码。当前状态的对象。有关更多信息，请参见What's the difference between console.dir and console.log?。

关于javascript - 可变对象属性行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52296893/