d3 selection.attributes.key.nodevalue 不返回当前 DOM 值

Question

每当我记录 selection.attributes 时，它都会记录完全需要的值，例如，如果有一个名为 y 的属性，它将记录 rect 在运行时在 DOM 中具有的相同值，但是每当我尝试使用 selection.attributes.y.nodeValue 访问该值时，它都会返回用于呈现它的 rect 的原始值。

我的问题是，如果实际的属性对象具有当前值，那么为什么当我尝试访问该对象中的键（在本例中为 y.nodeValue）时它会返回不同的值？

进一步解释：

这是我记录对象的代码和记录值检索的代码：

var notLiveYAttributes = chart.select("#not-live" + i + " rect.not-live")[0][0].attributes;
              console.log(notLiveYAttributes);
              console.log(notLiveYAttributes.y.value);

输出：

我在这里缺少什么以及如何检索属性的当前值（y 和高度）而不是最初呈现/填充的时间？

Answer 1

没有看到您的其余代码，我想说这里的问题是您的var notLiveYAttributes 在您应用于元素的任何修改之前被声明和初始化。因此，鉴于 javascript 的性质和 javascript 代码的解析方式，浏览器会立即记录 notLiveYAttributes，其值可能与当前 DOM 值不匹配。

我做了这个简单的小提琴来说明这一点：https://jsfiddle.net/55ezeLef/1/

我用 y = 10 创建了一些 rects。然后，我进行了转换，将 y 更改为 50。

即使 console.log 的代码在转换之后出现 y 值，如下所示：

rects.transition().duration(1000)
    .attr("y", 50);

var notLiveYAttributes = svg.select(".rect2")[0][0].attributes.y.value;
    console.log("the immediate value is " + notLiveYAttributes);

它将记录the immediate value is 10。

但如果我稍等一下：

setTimeout(function(){
    var notLiveYAttributes = svg.select(".rect2")[0][0].attributes.y.value;
        console.log("after waiting, the value is " + notLiveYAttributes);
}, 1500);

它将记录after waiting, the value is 50。