Javascript D3树映射调用产生NaN x0、x1、y0、y1值

我正在建立一个D3可视化系统，我遇到了一些麻烦

我已经能够填充我的初始树形图，但我想通过点击交互对其进行修改。为了做到这一点，我需要在每次单击时重新计算一个新的布局（然后在以后使用它做一些事情），使用我以前（当前显示的）数据的子集来完成

我已经编写了一个函数，它可以按我所希望的方式工作，并在我的

新根对象中填充每个
节点的
值
属性。据我所知，这是在我的
new_root
上运行
d3.treemap
的唯一先决条件以下是代码片段：

let treemap = d3.treemap()
    .tile(d3.treemapResquarify)
    .size([800, 400])
    .round(true)
    .paddingInner(1);

// later...

function object_is_direct_child(root, obj) {
    return (root.children.filter(child => (child.id === obj.name)).length > 0);
}

// ...much later...

// Create and bind the click event.
let click = function(d) {
    if (d.data.children.length > 0) {
        // Use the hover ID to get the underlying name attr (e.g. "Noise-hover" -> "Noise")
        let name = this.getAttribute("id").slice(0,-6);

        // Select the new root node.
        let new_root = root.children.find(c => c.id === name);

        // Sum.
        new_root = new_root.sum(node => ((object_is_direct_child(new_root, node)) ? node.n : 0));

        // Here is the problem area. This doesn't work as expected.
        treemap(new_root);            
    }
}

hover_rects.on("click", click);

这应该填充
new_节点
及其所有子节点上计算的、liad out
x0、x1、y0、y1
值。相反，
new_节点及其所有子节点都是NaN

我已经上传了到目前为止的要点。
我能够使用以下MWE脚本在节点中运行来调试它：

'use strict';

// Load data.
const tree = require('../threshold-tree');
const d3 = require('d3');
const assert = require('assert');

// Load in the data file as it would be loaded in the browser.
const fs = require('fs');
const csvString = fs.readFileSync('data/complaint_types.csv').toString();
const raw_data = d3.csvParse(csvString);

let tr = new tree.ThresholdTree(raw_data);
let hr = tr.as_hierarchy();
let root = d3.stratify().id(d => d.name).parentId(d => d.parent)(hr);

function object_is_direct_child(root, obj) {
    return (root.children.filter(child => (child.id === obj.name)).length > 0);
}

// Now the sum function itself.
function nodal_summer(node) {
    return ((object_is_direct_child(root, node)) ? node.n : 0);
}

root = root.sum(nodal_summer);

// Create our treemap layout factory function.
let treemap = d3.treemap()
    .tile(d3.treemapResquarify)
    .size([800, 400])
    .round(true)
    .paddingInner(1);

// Apply our treemap function to our data.
debugger;
treemap(root);

// Again...this is where it fails!
let new_root = root.children[0];
new_root.parent = null;
new_root = new_root.sum(node => ((object_is_direct_child(new_root, node)) ? node.n : 0));

debugger;
new_root = treemap(new_root);
console.log(treemap(new_root));

罪魁祸首是
d3
中的
positionNode
回调：

  function positionNode(node) {
    var p = paddingStack[node.depth],
    ...

paddingStack
被初始化为长度为1的列表，但是
节点。depth
是
1
，因此
p
被初始化为
NaN
，从那里传播

两个有效的修复方法是：

使用
node.copy（）
new_root.eachBefore（函数（节点）{node.depth-->）