可变对象属性行为

Question

我正在尝试使用D3框架设置SVG const N = 5 from ([0,1,1,1,1,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3]) .pipe( bufferCount(N, 1), filter(buffer => buffer.length === N && buffer.every(i => i === buffer[0])), take(1), map(buffer => buffer[0]), ) .subscribe(console.log); 元素的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属性未定义吗？ >

已编辑 我编辑此d3 example并使用Chrome

Answer 1

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

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

如果您在调试器中逐步执行代码，则会发现目标链接尚未设置x0和y0，因此这就是tx0和{{1 }}即将出现未定义状态。为什么是这样？如果您仔细看一下代码，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语句评估了代码运行时与{ {1}}语句，用于访问对象的当前状态。有关更多信息，请参见What's the difference between console.dir and console.log?。