Javascript 修改d3js分区冰柱图

因此，我试图修改这个可缩放的冰柱图，这样我就可以拥有完全相同但最后的节点，浅绿色的节点堆叠在彼此之上，而不是彼此相邻。这对我来说相当复杂，因为冰柱图的逻辑只有在这一点上才会被打破。到目前为止，能够引用这一点只能由d的d.depth属性给出。但我仍在努力寻找是否有更优雅的解决方案。
这是可缩放分区冰柱的代码

var width = 960,
height = 250;

var x = d3.scale.linear()
.range([0, width]);

var y = d3.scale.linear()
.range([0, height]);

var color = d3.scale.category20c();

var vis = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height);

var partition = d3.layout.partition()
.value(function(d) { return d.size; });

d3.json("../data/flare.json", function(json) {
  var rect = vis.data([json]).selectAll("rect")
  .data(partition.nodes)
.enter().append("rect")
  .attr("x", function(d) { return x(d.x); })
  .attr("y", function(d) { return y(d.y); })
  .attr("width", function(d) { return x(d.dx); })
  .attr("height", function(d) { return y(d.dy); })
  .attr("fill", function(d) { return color((d.children ? d : d.parent).name); })
  .on("click", click);

  function click(d) {
    x.domain([d.x, d.x + d.dx]);
    y.domain([d.y, 1]).range([d.y ? 20 : 0, height]);

    rect.transition()
      .duration(750)
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return y(d.y); })
      .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
      .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
  }
});

我的所有属性x、y、宽度和高度都必须有不同的逻辑才能创建我相信的堆叠矩形。。。但我如何确定呢？ 非常感谢您的帮助。

---

谢谢

尝试转换数据，使可视化代码无需修改即可正确绘制数据。如果我理解正确，您试图显示节点的子节点而不是节点本身。此代码段将目标节点的所有子节点重新分配到目标节点的父节点，然后删除目标节点（假设目标节点是名为“节点”的根节点的子节点）：

d3.json（“../data/flare.json”），函数（json）{
d3.keys（json['node']）.forEach（函数（e）{
json[e]=json['node'][e]；
});
json['node']=null
/*vis代码的其余部分*/
});

---

希望这有帮助。

Seliopou感谢您的回答。这听起来确实是个好主意，我还没有完全探讨过，但我会尝试一下。让我知道它是如何进行的。为了清楚起见，我刚刚编辑了我的回答。