0


因此，我正在尝试从此链接修改可缩放冰柱图表，以便我可以拥有完全相同但最后一个节点，浅绿色的节点彼此堆叠而不是彼此相邻。这对我来说非常复杂，因为冰柱图的逻辑只能在这一点上打破。到目前为止，能够参考这一点只能由 d 的 d.depth 属性给出。我仍然在尝试寻找是否有更优雅的解决方案。
这是可缩放分区 Icicle 的代码

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、宽度和高度都必须有不同的逻辑才能创建我相信的堆叠矩形......但我怎么能确定呢？任何帮助深表感谢。谢谢！

4

1 回答 1

0

尝试以可视化代码无需修改即可正确绘制数据的方式转换数据。如果我理解正确，您正在尝试显示节点的子节点来代替节点本身。此代码片段会将目标节点的所有子节点重新设置为目标节点的父节点，然后删除目标节点（假设目标节点是称为“节点”的根节点的子节点）：

d3.json("../data/flare.json", function(json) {
    d3.keys(json['node']).forEach(function(e) {
        json[e] = json['node'][e];
    });
    json['node'] = null

    /* the rest of the vis code */
});

希望这可以帮助。

于 2012-11-22T19:25:40.430 回答