Question

所以我试图从这个link修改Zoomable Icicle图表，这样我就可以拥有完全相同但最后的节点，浅绿色的图表堆叠在彼此之上而不是彼此相邻。这对我来说非常复杂，因为冰柱图的逻辑只能在这一点上破坏。到目前为止，能够引用这一点只能由d的d.depth属性给出。我还在努力寻找是否有更优雅的解决方案这是Zoomable分区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，宽度和高度都必须有不同的逻辑才能创建堆积的矩形我相信......但我怎样才能确定？任何帮助深表感谢。谢谢！

Answer 1

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

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 */
});

希望这有帮助。

d3js分区冰柱图修改

1 个答案: