时间戳

首页 > 解决方案 > 可变对象属性行为

javascript - 可变对象属性行为

问题描述

我正在尝试使用 D3 框架设置x和ysvg元素。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 示例并使用 Chrome

标签： javascriptd3.js

解决方案

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

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

如果您在调试器中单步执行您的代码，您会发现目标链接还没有x0并且尚未设置，y0所以这就是未定义的原因。为什么是这样？如果你看一下代码，并且是在两个地方设置的；首先，根节点在运行树绘制代码之前设置了这两个属性：tx0ty0node.x0node.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 有什么区别？了解更多信息。

推荐阅读