Javascript d3分区布局在更改值访问器时出错

我试图使d3分区布局的行为类似于Mike的treemap示例：

我对该文件执行了以下步骤：

• 搜索将“树映射”替换为“分区”
• 删除对treemap布局的.sticky调用，因为分区没有 支持它
• 修复叶节点的颜色方案->始终返回颜色（d.name）
• 始终在节点上放置文本->始终在文本属性中返回d.name

最初，分区渲染良好。但是，如果使用右上角的输入控件在值函数“size”和“count”之间切换，则会有数据节点开始在层次结构中移动其级别

有人能帮我解释一下这个问题的解决办法吗

为了方便地重现这个问题，我在以下位置创建了一个JSFIDLE：

---

您需要指定一个键函数（第二个参数是

.data（）

），它告诉D3如何匹配数据和节点。可能是

函数（d）{return d.name；}

。谢谢你的建议！我已经试过了。现在转换不起作用，图形中有一个洞。用一个层次结构布局替换另一个层次结构布局显然是微不足道的。我可能已经找到了解决方案。将键函数更改为更智能的函数，以避免键名冲突

function（d）{return d.parent？d.parent.name+“+d.name:d.name；}

d3.selectAll("input").on("change", function change() {
    var value = this.value === "count"
        ? function() { return 1; }
        : function(d) { return d.size; };
    node
        .data(partition.value(value).nodes)
            .transition()
            .duration(1500)
            .call(position);
});