Javascript 可变对象属性行为

我试图使用D3框架设置svg

path

元素的

x

和

y

。我编写此代码是为了为每个路径添加

源

/

目标

节点：

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

的值与下一个记录的值不同，以及为什么

目标

属性未定义

已编辑

---

我编辑了这篇文章，并使用了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;

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

绘制图表后，运行此代码将

x0

和

y0

添加到所有节点：

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

如果一个节点是新添加到图表中的，它将不会设置

x0

和

y0

，而如果它之前已显示、隐藏，然后重新显示（例如，当您折叠父节点，然后将其展开时），已经定义了

x0

和

y0

，因此没有错误或未定义的目标节点属性。第一次绘制树时创建的五个链接都为源节点设置了

x0

和

y0

，因为它是这里的

根变量：

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

但是目标节点将不会设置
x0
和
y0
，直到绘制完所有内容并运行此代码：

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

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

您从
console.log
语句和
console.dir
语句中看到的差异是由于
console.log
语句在运行代码时评估对象的状态，而
console.dir
语句允许访问当前状态的对象。有关详细信息，请参阅。
您尚未运行模拟。这是您需要在
勾选
回调中添加的代码。我认为在
insert（）
调用中不需要
g
。由于
d.target
不是对象，因此未定义。请参阅@rioV8了解您所说的模拟？如果
d.target
不是对象，它是什么？力模拟，第一个勾选将修改链接对象并用对象替换字符串引用references@AlexeyKubasov你的提琴不起作用——是一个工作版本。非常感谢！我真的忘了在js中创建动态属性。但是你能解释一下
.dir（）
对象的当前状态吗？我已经阅读了链接的问题，但没有找到它。我发现电流是在我调用输出时出现的，是吗？我不知道“代码运行时”和“对象当前状态”之间有什么区别。现在的状态是我跑步的时候。还是不？